#2 Plugin: Content length toolbar button

[Stevan Koprivica]

Adds a Content length toolbar button to your editor.
Dinamically counts text and html length.

----------

/*
* FCKeditor - The text editor for internet
* Copyright (C) 2003-2004 Frederico Caldeira Knabben
*
* Licensed under the terms of the GNU Lesser General
Public License:
*
http://www.opensource.org/licenses/lgpl-
license.php
*
* For further information visit:
* http://www.fckeditor.net/
*
* File Name: fckplugin.js
* This is the Content Length plugin definition
file.
*
* Version: 2.0 FC (Preview)
* Modified: 2005-03-30 11:20:10
*
* File Authors:
* Stevan Koprivica
(stevan.koprivica@gmail.com)
*
* Comment:
* It doesn't use language files, should be changed to
use id
* - just change tooltip string.
*/

var My_FCKContentLengthCommand = function() {
this.Name = 'ContentLength';
this.iTextLength = 0;
this.iHTMLLength = 0;
}

My_FCKContentLengthCommand.prototype.Execute =
function() {
var oDOM = FCK.EditorDocument;
// The are two diffent ways to get the text
(without HTML markups).
// It is browser specific.

if (document.all) { // If Internet
Explorer.
this.iTextLength =
oDOM.body.innerText.length;
this.iHTMLLength =
oDOM.body.innerHTML.length;
} else {
// If Gecko.
var r = oDOM.createRange() ;
r.selectNodeContents
(oDOM.body);
this.iTextLength = r.toString
().length;
this.iHTMLLength =
r.startContainer.innerHTML.length;
}
}

My_FCKContentLengthCommand.prototype.GetState =
function() {
return FCK_TRISTATE_OFF;
}

// Register the related commands.
FCKCommands.RegisterCommand('ContentLength',
new My_FCKContentLengthCommand()) ;

var FCKContentLengthButton = function() {
commandName = 'ContentLength'
this.Command
= FCKCommands.GetCommand
(commandName) ;
// this.Label
= label ? label : commandName ;
this.Label
= '0 / 0',
// this.Tooltip = tooltip ?
tooltip : ( label ? label : commandName) ;
this.Tooltip = 'Text
length / HTML length',
// this.Style
= style ? style :
FCK_TOOLBARITEM_ONLYTEXT;
this.Style
= FCK_TOOLBARITEM_ONLYTEXT;
// this.SourceView
= sourceView ? true : false ;
this.SourceView
= false;
// this.ContextSensitive = contextSensitive ?
true : false ;
this.ContextSensitive = true;
this.IconPath
= FCKConfig.SkinPath + 'toolbar/' +
commandName.toLowerCase() + '.gif' ;
this.State
= FCK_UNKNOWN ;
}

FCKContentLengthButton.prototype.CreateInstance =
function( parentToolbar )
{
/*
<td title="Bold" class="TB_Button_Off"
unselectable="on" onmouseover="Button_OnMouseOver
(this);" onmouseout="Button_OnMouseOut(this);">
<table
class="TB_ButtonType_Icon" cellspacing="0"
cellpadding="0" border="0">
<tr>
<td
class="TB_Icon"><img src="icons/redo.gif" width="21"
height="21"></td>
<td
class="TB_Text" unselectable="on"><label
unselectable="on"></label></td>
</tr>
</table>
</td>
*/
this.DOMDiv = document.createElement
( 'div' ) ;
this.DOMDiv.className = 'TB_Button_Off' ;

this.DOMDiv.FCKToolbarButton = this ;

this.DOMDiv.onmouseover =
FCKContentLengthButton_OnMouseOver ;
this.DOMDiv.onmouseout =
FCKContentLengthButton_OnMouseOut ;
this.DOMDiv.onclick =
FCKContentLengthButton_OnClick ;

// Gets the correct CSS class to use for the
specified style (param).
var sClass ;
switch ( this.Style )
{
case
FCK_TOOLBARITEM_ONLYICON :
sClass
= 'TB_ButtonType_Icon' ;
break ;
case
FCK_TOOLBARITEM_ONLYTEXT :
sClass
= 'TB_ButtonType_Text' ;
break ;
case
FCK_TOOLBARITEM_ICONTEXT :
sClass = '' ;
break ;
}

this.DOMDiv.innerHTML =
'<table title="' + this.Tooltip + '"
class="' + sClass + '" cellspacing="0" cellpadding="0"
border="0" unselectable="on">' +
'<tr>' +
'<td
class="TB_Icon" unselectable="on"><img src="' +
this.IconPath + '" width="21" height="21"
unselectable="on"></td>' +
'<td
class="SC_FieldLabel" unselectable="on"><label
unselectable="on">' + this.Label + '</label></td>' +
'</tr>' +
'</table>' ;
this._LabelEl =
this.DOMDiv.getElementsByTagName('label')[0];
this._LabelEl.innerHTML = this.Label ;

var oCell = parentToolbar.DOMRow.insertCell
(-1) ;
oCell.appendChild( this.DOMDiv ) ;

this.RefreshState() ;
}

function FCKContentLengthButton_OnClick() {
if ( this.FCKToolbarButton.State !=
FCK_TRISTATE_DISABLED) {

this.FCKToolbarButton.Command.Execute() ;
this.FCKToolbarButton.SetLabel2
(this.FCKToolbarButton.Command.iTextLength + ' / ' +
this.FCKToolbarButton.Command.iHTMLLength);
}
return false ;
}

FCKContentLengthButton.prototype.SetLabel2 =
function(text) {
if (text == undefined) return;
this.Label = text.length == 0 ? '&nbsp;' :
text ;
if (this._LabelEl)
this._LabelEl.innerHTML =
this.Label ;
}

FCKContentLengthButton.prototype.RefreshState =
function() {
this.Command.Execute() ;
this.SetLabel2(this.Command.iTextLength
+ ' / ' + this.Command.iHTMLLength);

// Gets the actual state.
var eState = this.Command.GetState() ;

// If there are no state changes than do
nothing and return.
if ( eState == this.State ) return ;

// Sets the actual state.
this.State = eState ;

switch (this.State) {
case FCK_TRISTATE_ON :

this.DOMDiv.className = 'TB_Button_On' ;
break ;
case FCK_TRISTATE_OFF :

this.DOMDiv.className = 'TB_Button_Off' ;
break ;
default :

this.DOMDiv.className
= 'TB_Button_Disabled' ;
break ;
}
}

FCKContentLengthButton_OnMouseOver

FCKToolbarButton_OnMouseOver;
FCKContentLengthButton_OnMouseOut
=
FCKToolbarButton_OnMouseOut;
FCKContentLengthButton.prototype.Enable
= FCKToolbarButton.prototype.Enable;
FCKContentLengthButton.prototype.Disable
= FCKToolbarButton.prototype.Disable;

// Create the "ContentLength" toolbar button.
var oContentLengthItem = new FCKContentLengthButton
() ;

FCKToolbarItems.RegisterItem('ContentLength',
oContentLengthItem);
// 'ContentLength' is the name used in the Toolbar config.

[Stevan Koprivica]

same script but idented (this "flattened" it)

[m4ling]

Logged In: YES
user_id=801431

Sounds intriguing!
Could you perhaps attach a screenshot for people to see the
result without having to change their code only to find out
that it's not what they expected.
Thanks!

[Stevan Koprivica]

[Stevan Koprivica]

Logged In: YES
user_id=943381

Not a problem - here it is in action :-).

[imtheyo]

Logged In: YES
user_id=1278458

Great work on this plugin. I have found it very useful.
However, after upgrading to the v2.0FC, In IE I get a JS error:

'FCKToolbarButton_OnMouseOver' is undefined

and then a dialog pops up saying:

Unkown toolbar item "ContentLength"

After I press OK, the editor loads properly without the plugin

In FireFox I only get the dialog error.

Is this a problem with 2.0FC? The plugin worked with 2.0FC
preview as well as the 2.0FCBeta that was released the other
day.

[Stevan Koprivica]

Logged In: YES
user_id=943381

Hello Imtheyo,

Fred added a few features for OnMouseOver, and this plugin
tried to used it in "old way" :-)

Please find attached changed version for FCKeditor final
candidate.

[imtheyo]

Logged In: YES
user_id=1278458

Hi ctebah!

Thank you for your quick reply.

I think you accidentaly attached fckconfig.js, rather than
fckplugin.js :- )

Unless there is something I'm supposed to do differently in
the config?

[Stevan Koprivica]

Logged In: YES
user_id=943381

no - you don't have to do anything differently in the
config, I uploaded wrong file.

I hope this one is better :-)

[Stevan Koprivica]

same plugin for fckeditor final candidate (fixed)

[imtheyo]

Logged In: YES
user_id=1278458

This one works perfectly.

Thank you, and Great Work!

[gbo]

Logged In: YES
user_id=1229114

Hello,

Thanks for the plugin it works fine, I have one question how
can I pass a variable (max chars allowed) to this plugin.
The idea would be to compare current chars typed (text
length) with max chars allowed and if bypasses -> FCKeditor
should display a warning, ideally I would like to change the
color in the toolbar to red but I am not sure if this is
feasible.

ex:
[490/500] -> black
[505/500] -> red

PS Is it also possible to retrieve the variable text length
when I save the content to a DB and if yes how to do that?

Thanks in advance

Gil B.

[Nobody/Anonymous]

Logged In: NO

In IE when typing the counter does not update. Could you
please look into this?

Thank you,
-Kyle

[Nobody/Anonymous]

Logged In: NO

In IE when typing the counter does not update. Could you
please look into this?

Thank you,
-Kyle

[Nobody/Anonymous]

Logged In: NO

In IE when typing the counter does not update. Could you
please look into this?

Thank you,
-Kyle

[Nobody/Anonymous]

Logged In: NO

I am a newbie. How should i install this plugin? Create a
folder and then???

maarteb

[imtheyo]

Logged In: YES
user_id=1278458

Adding a plugin is pretty simple.

1) First, create a directory using the plugin name in the
plugins folder (ex. x:\fckeditor\editor\plugins\ContentLength)

2) Place fckplugin.js inside this new folder.

3) In fckconfig.js, you'll need to do two things:
a) around line 36, directly under:
// FCKConfig.Plugins.Add( 'placeholder', 'en,it' ) ;

Add:
FCKConfig.Plugins.Add( 'ContentLength' ) ;

Note: the name you use here IS case sensitive. Make sure
you have it exactly like the folder you created in Step 1.

b) Add 'ContentLength' in your toolbar somewhere:

FCKConfig.ToolbarSets["Basic"] = [
['ContentLength','Bold','Italic','-','OrderedList','UnorderedList','-
','Link','Unlink','-','About']
] ;

Visit your page with the editor (you may have to clear your
cache) and you should see the button on the toolbar.

[Luis Amaral]

Logged In: YES
user_id=1587106

Hy,

I am with the next problems:

'FCKToolbarButton_OnMouseOver' is undefined and then a
dialog pops up saying:
Unkown toolbar item "ContentLength"

I am using the next versions:

FCKEditor Version 2.31
ContentLenght (fckplugin.js) Version: 2.0 FC - Modified:
2005-05-14

Someone can help me or send the correct archive for my e-
mail: luisaugusto@iblox.net

tks

[Stevan Koprivica]

Content length plugin for FCKEditor 2.3

[Stevan Koprivica]

Logged In: YES
user_id=943381

Here's the "fixed" version for FCKEditor 2.3 (haven't test
it under 2.31, I read the changes - it should work).

And another simple feature is added - if you click on the
content length button you would get some text statistics
(number of paragraphs, words, chars with/without spaces).

ctebah

[Ben]

Logged In: YES
user_id=1926458
Originator: NO

I tried adding this plugin to 2.4.2 but I'm getting a "ContentLengthSetWarning is not a function" error. Any ideas on how to get this working in the latestest version? Everything seems to work except setting the warning level dynamicaly.
Thanks
Ben

[Anonymous]

Hi, tried to get this working in FCK 2.6.4 but no luck. Any chanche that somebody UG this to work with FCK 2.6.4?