| Author |
Message |
neralex
Site Admin
Joined: Aug 22, 2007
Posts: 1775
|
 Posted:
Sun Jul 08, 2012 8:12 pm |
|
Its to funny what is all possible with jQuery. This little awesome script comes with very cool extension for the CK.
Demo: http://jsfiddle.net/VagrantRadio/2Jzpr/
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 -->
}
|
 |
Last edited by neralex on Thu Jul 26, 2012 12:23 pm; edited 1 time in total |
|
|
|
kguske
Site Admin
Joined: Jun 04, 2004
Posts: 6437
|
| Posted:
Mon Jul 16, 2012 10:54 am |
|
Interesting...thanks for posting. |
_________________
I search, therefore I exist...
Only registered users can see links on this board! Get registered or login! |
|
|
|
|
hicuxunicorniobestbuildpc
The Mouse Is Extension Of Arm
Joined: Aug 13, 2009
Posts: 1123
|
| Posted:
Mon Jul 16, 2012 12:33 pm |
|
It looks pretty nice, thanks, what files are required to modify neralex? |
| |
|
|
|
|
neralex
|
| Posted:
Tue Jul 17, 2012 6:36 am |
|
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
|
| Posted:
Tue Jul 17, 2012 8:13 am |
|
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.
 |
| |
|
|
|
|
neralex
|
| Posted:
Tue Jul 17, 2012 10:44 am |
|
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. |
| |
|
|
|
|
neralex
|
| Posted:
Thu Jul 26, 2012 12:19 pm |
|
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
|
| Posted:
Thu Jul 26, 2012 2:26 pm |
|
Where should I place this code neralex. What files we must mod in order to work...Thanks in advance. |
| |
|
|
|
|
neralex
|
| Posted:
Thu Jul 26, 2012 2:36 pm |
|
| neralex wrote: | | But first you need a place where you can integrate it useful. |
unicornio, can you an only one try to read the threads  |
| |
|
|
|
|
|
|
![[Valid RSS]](https://www.ravenphpscripts.com/images/valid-rss.png "Validate my RSS feed"){kind=small}
