Simple HtmlEditor character counter plugin

[FKilloran]

Hi,

Here's a simple little plugin for the HtmlEditor I thought might be useful to people out there as I haven't seen anything similiar. Its a plugin to the HtmlEditor toolbar which simply updates the display of the current size of the HtmlEditor data value. Might be handy someday.

/**
 * Character Counter plugin for Ext HtmlEditor
 *
 * Example of usage:
 *
 * var myplugin = new Ext.ux.form.HtmlEditorCounterPlugin ({prefix: 'Current size is '});
 *
 */

if (Ext.ux.form == undefined) {
    Ext.ns('Ext.ux.form');
}

Ext.ux.form.HtmlEditorCounterPlugin = function (config) {
    Ext.apply(this, config);
};

Ext.extend (Ext.ux.form.HtmlEditorCounterPlugin, Ext.util.Observable, {
    prefix: '',
    itemTypeSingular: ' character',
    itemTypePlural: ' characters',
    itemTypeNone: ' characters',
    onRender: function (o) {
        this.counter = document.createElement("DIV");
        this.editor.getToolbar ().add (this.counter);
        this.set_counter ((this.editor.initialConfig.value || '').length);
    },
    init:   function (editor) {
        this.editor = editor;
        this.editor.on ('render', this.onRender, this);
        this.editor.on ('sync', function (ct, html) { this.set_counter (html.length); }, this);
    },
    set_counter: function (s) {
        this.counter.innerHTML = this.prefix + s + ((s) ? ((s > 1) ? this.itemTypePlural: this.itemTypeSingular) : this.itemTypeNone);
    }
});

Kind regards,

Fintan

[pludikhu]

Hi FKilloran

Thank you for your plugin which seems exactly what I was looking for for some time now.

Thanks a lot!

Patrick

[wemerson.januario]

Hello, Congratulation! How to use this? Can someone post a zip file of the files needed. thanks.

[KRavEN]

Slight modification to put the count under the textarea left aligned. The way it was put the count in the toolbar which makes it the minimum width for the editor even wider.

/**
 * Character Counter plugin for Ext HtmlEditor
 *
 * Example of usage:
 *
 * var myplugin = new Ext.ux.form.HtmlEditorCounterPlugin ({prefix: 'Current size is '});
 *
 */

if (Ext.ux.form == undefined) {
    Ext.ns('Ext.ux.form');
}

Ext.ux.form.HtmlEditorCounterPlugin = function (config) {
    Ext.apply(this, config);
};

Ext.extend (Ext.ux.form.HtmlEditorCounterPlugin, Ext.util.Observable, {
    prefix: '',
    itemTypeSingular: ' character',
    itemTypePlural: ' characters',
    itemTypeNone: ' characters',
    onRender: function (o) {
        this.counter = Ext.DomHelper.append(document.body,{
          tag : 'div',
          style: 'padding-top:2px'
        })
        this.editor.wrap.up('div.x-form-element').appendChild(this.counter);
        this.set_counter ((this.editor.initialConfig.value || '').length);
    },
    init:   function (editor) {
        this.editor = editor;
        this.editor.on ('render', this.onRender, this);
        this.editor.on ('sync', function (ct, html) { this.set_counter (html.length); }, this);
    },
    set_counter: function (s) {
        this.counter.innerHTML = this.prefix + s + ((s) ? ((s > 1) ? this.itemTypePlural: this.itemTypeSingular) : this.itemTypeNone);
    }
});

[sanjshah]

Fintan,

Could you please provide an example of how to use this?

Thanks in advance!

[mschwartz]

FYI, some versions (if not all) of IE have memory leak issues when you set innerHTML.

You'd be better off using the update() method of an Ext.Element wrapped around your DOM element.

How often is sync called? If you have a lot of text in the editor, it could be REALLY slow/sluggish to update the counter display.

See:
http://www.julienlecomte.net/blog/2007/12/38/

[tameshwar]

this code is having error (Mozila 12.0) and Extjs 3.3.

this.editor.wrap.up("div.x-form-element") is null

this.editor.wrap.up('div.x-form-element').appendChild(this.counter);

Why it is giving error?