Ravens PHP Scripts: Forums
 

 

View next topic
View previous topic
Post new topic   Reply to topic    Ravens PHP Scripts And Web Hosting Forum Index -> FCKeditor/WYSIWYG Issues
Author Message
neralex
The Mouse Is Extension Of Arm


Joined: Aug 22, 2007
Posts: 1325
Location: Germany

PostPosted: Sun Jul 08, 2012 8:12 pm Reply with quote

Its to funny what is all possible with jQuery. This little awesome script comes with very cool extension for the CK.


Demo: Only registered users can see links on this board! Get registered or login!

The following example is based on the hometext editor field in the News module and it works for new and posted articles. I will try it to implement in my next News-Mod update.


add before your footer include:

Code:
      global $advanced_editor;

      if (isset($advanced_editor) || $advanced_editor == 1) {
         $ckmaxchars = '300';
         $ckinstance = 'hometext';
         $ckcounter  = '<script type="text/javascript">' . PHP_EOL;
         $ckcounter .= 'jQuery(function() {' . PHP_EOL;
         $ckcounter .= 'var editor = CKEDITOR.instances["' . $ckinstance . '"]' . PHP_EOL;
         $ckcounter .= 'global = editor;' . PHP_EOL;
         $ckcounter .= 'setInterval("updateCount()", 400);' . PHP_EOL;
         $ckcounter .= '});' . PHP_EOL;
         $ckcounter .= 'function updateCount() {' . PHP_EOL;
         $ckcounter .= '   var almost = global.getData();' . PHP_EOL;
         $ckcounter .= '   var main = almost.length *100;' . PHP_EOL;
         $ckcounter .= '   var value = (main / ' . $ckmaxchars . ');' . PHP_EOL;
         $ckcounter .= '   var count = ' . $ckmaxchars . ' - almost.length;' . PHP_EOL;
         $ckcounter .= '   $(\'#count\').html(almost.length);' . PHP_EOL;
         $ckcounter .= '   if(almost.length <= ' . $ckmaxchars . ') {' . PHP_EOL;
         $ckcounter .= '      jQuery(\'#count\').html(count).removeClass("red");' . PHP_EOL;
         $ckcounter .= '      jQuery(\'.bar\').animate({"width": value+\'%\'}, 1).removeClass("redbar").addClass("bluebar");' . PHP_EOL;
         $ckcounter .= '   } else {' . PHP_EOL;
         $ckcounter .= '      jQuery(\'#count\').html(count).addClass("red");' . PHP_EOL;
         $ckcounter .= '      jQuery(\'.bar\').animate({"width": \'100%\'}, 1).removeClass("bluebar").addClass("redbar");' . PHP_EOL;
         $ckcounter .= '   }' . PHP_EOL;
         $ckcounter .= '}' . PHP_EOL;
         $ckcounter .= '  </script>' . PHP_EOL;
         addJSToBody($ckcounter,'inline');   
      }


add to your style.css:

Code:
.red {color:#900;}

#counter {font-weight:bold; margin-bottom:5px;}
#count {float:right;margin-right:8px;font-weight:bold;}
.bar {width:0px; height:16px;}
.bluebar {background:#2098e4; background:-moz-linear-gradient(center top , #2098e4, #105cbe); background: -webkit-gradient(linear, left top, left bottom, from(#2098e4), to(#105cbe));}
.redbar {background:#cc0000; background:-moz-linear-gradient(center top , #cc0000, #900); background: -webkit-gradient(linear, left top, left bottom, from(#cc0000), to(#900));}
.barcount {height:16px; width:150px; overflow:hidden; border:solid 1px #d3d3d3; float:right; -webkit-border-radius:0.3em; -moz-border-radius:0.3em; border-radius:0.3em;}



add this before your used editor field:

Code:
      global $advanced_editor;

      if (isset($advanced_editor) || $advanced_editor == 1) {
         echo '<div id="counter">140 Characters Maximum' . PHP_EOL
              . '   <div class="barcount">' . PHP_EOL
              . '      <div class="bar bluebar"></div>' . PHP_EOL
              . '   </div>' . PHP_EOL //<!-- end barcount -->
              . '   <div id="count"></div>' . PHP_EOL
              . '</div>' . PHP_EOL; //<!-- end counter -->
      }


Wink


Last edited by neralex on Thu Jul 26, 2012 12:23 pm; edited 1 time in total 
View user's profile Send private message
kguske
Site Admin


Joined: Jun 04, 2004
Posts: 6383

PostPosted: Mon Jul 16, 2012 10:54 am Reply with quote

Interesting...thanks for posting.

_________________
I google, therefore I exist...
Only registered users can see links on this board! Get registered or login!
 
View user's profile Send private message
hicuxunicorniobestbuildpc
Life Cycles Becoming CPU Cycles


Joined: Aug 13, 2009
Posts: 967
Location: Netherland

PostPosted: Mon Jul 16, 2012 12:33 pm Reply with quote

It looks pretty nice, thanks, what files are required to modify neralex?
 
View user's profile Send private message Visit poster's website
neralex
PostPosted: Tue Jul 17, 2012 6:36 am Reply with quote

You need an installed nukeWYSIWYG(tm) 3.6.3 (ckeditor) for this, an module where you want use it and you must add $advanced_editor as global in your used function.
 
hicuxunicorniobestbuildpc
PostPosted: Tue Jul 17, 2012 8:13 am Reply with quote

I have nukeWYSIWYG(tm) 3.6.3 (ckeditor) installed, please let us know what files we should modify, be more specific so me or other people can do the modification on the right place. I just don't want to mess anything up.

Quote:
add before your footer include:


What file? Not all the people understand this. I understand the sentence but we have in modules News

article.php
comments.php

What could be easy for you could be difficult for any people. I just see lots of forums with missing information( not complete ) and in the future if we don't write down what kind of mods we do then it is will be hard to update the core with the next version.

I hope you get my point and thanks again to share your knowledge with us in order to improve RavenNuke.
Smile
 
neralex
PostPosted: Tue Jul 17, 2012 10:44 am Reply with quote

unicornio, this is an example for module-authors who use the editor in the admin functions. I self use this in some own modules and i will try it to implement in the next release of my News-Mod. But first you need a place where you can integrate it useful. Smile
 
neralex
PostPosted: Thu Jul 26, 2012 12:19 pm Reply with quote

I have tweaked the counter again. Now is it possible, to choose the counting with and without html-tags.

Code:
      global $advanced_editor;

      if (isset($advanced_editor) || $advanced_editor == 1) {
         $ckmaxchars = 300;
         $ckinstance = 'hometext';
         $nohtmlcount = 1; // set to 0 for counting with html tags
         if ($nohtmlcount == 1) {
            $ckreplacer = 'replace(/(<([^>]+)>)/ig, \'\').';
         } else {
            $ckreplacer = '';
         }
         $ckcounter  = '<script type="text/javascript">' . PHP_EOL;
         $ckcounter .= '   jQuery(function() {' . PHP_EOL;
         $ckcounter .= '      var editor = CKEDITOR.instances["' . $ckinstance . '"]' . PHP_EOL;
         $ckcounter .= '      global = editor;' . PHP_EOL;
         $ckcounter .= '      setInterval("updateCount()", 400);' . PHP_EOL;
         $ckcounter .= '   });' . PHP_EOL;
         $ckcounter .= 'function updateCount() {' . PHP_EOL;
         $ckcounter .= '   var almost = global.getData();' . PHP_EOL;
         $ckcounter .= '   var main = almost.' . $ckreplacer . 'length *100;' . PHP_EOL;
         $ckcounter .= '   var value = (main / ' . $ckmaxchars . ');' . PHP_EOL;
         $ckcounter .= '   var count = ' . $ckmaxchars . ' - almost.' . $ckreplacer . 'length;' . PHP_EOL;
         $ckcounter .= '   $(\'#ckcount\').html(almost.' . $ckreplacer . 'length);' . PHP_EOL;
         $ckcounter .= '   if(almost.' . $ckreplacer . 'length <= ' . $ckmaxchars . ') {' . PHP_EOL;
         $ckcounter .= '      jQuery(\'#ckcount\').html(count).removeClass("ckred");' . PHP_EOL;
         $ckcounter .= '      jQuery(\'.ckbar\').animate({"width": value+\'%\'}, 1).removeClass("ckredbar").addClass("ckbluebar");' . PHP_EOL;
         $ckcounter .= '   } else {' . PHP_EOL;
         $ckcounter .= '      jQuery(\'#ckcount\').html(count).addClass("ckred");' . PHP_EOL;
         $ckcounter .= '      jQuery(\'.ckbar\').animate({"width": \'100%\'}, 1).removeClass("ckbluebar").addClass("ckredbar");' . PHP_EOL;
         $ckcounter .= '   }' . PHP_EOL;
         $ckcounter .= '}' . PHP_EOL;
         $ckcounter .= '</script>' . PHP_EOL;
         addJSToBody($ckcounter,'inline');
      }


Last edited by neralex on Thu Jul 26, 2012 6:11 pm; edited 1 time in total 
hicuxunicorniobestbuildpc
PostPosted: Thu Jul 26, 2012 2:26 pm Reply with quote

Where should I place this code neralex. What files we must mod in order to work...Thanks in advance.
 
neralex
PostPosted: Thu Jul 26, 2012 2:36 pm Reply with quote

neralex wrote:
But first you need a place where you can integrate it useful. Smile


unicornio, can you an only one try to read the threads Question
 
Display posts from previous:       
Post new topic   Reply to topic    Ravens PHP Scripts And Web Hosting Forum Index -> FCKeditor/WYSIWYG Issues

View next topic
View previous topic
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You can attach files in this forum
You can download files in this forum


Powered by phpBB © 2001-2007 phpBB Group
All times are GMT - 6 Hours
 
Forums ©