#2 Plugin: Content length toolbar button

open
nobody
None
5
2014-04-25
2005-03-30
Stevan Koprivica
No

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.

Discussion

    • status: open --> open-out-of-date
     
  • same script but idented (this "flattened" it)

     
    Attachments
    • status: open-out-of-date --> open
     
  • m4ling
    m4ling
    2005-04-04

    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!

     
  • Logged In: YES
    user_id=943381

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

     
    • labels: 508311 -->
    • milestone: 403778 -->
     
  • imtheyo
    imtheyo
    2005-05-14

    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.

     
  • 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
    imtheyo
    2005-05-14

    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?

     
  • 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 :-)

     
  • same plugin for fckeditor final candidate (fixed)

     
    Attachments
  • imtheyo
    imtheyo
    2005-05-15

    Logged In: YES
    user_id=1278458

    This one works perfectly.

    Thank you, and Great Work!

     
  • gbo
    gbo
    2005-05-25

    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.

     
  • Logged In: NO

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

    Thank you,
    -Kyle

     
  • Logged In: NO

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

    Thank you,
    -Kyle

     
  • Logged In: NO

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

    Thank you,
    -Kyle

     
  • Logged In: NO

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

    maarteb

     
  • imtheyo
    imtheyo
    2005-06-08

    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
    Luis Amaral
    2006-08-30

    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

     
  • Content length plugin for FCKEditor 2.3

     
    Attachments
  • 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
    Ben
    2007-10-31

    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
    2010-01-25

    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?