1. #1
    Ext User
    Join Date
    Sep 2008
    Posts
    1
    Vote Rating
    0
    FKilloran is on a distinguished road

      0  

    Default Simple HtmlEditor character counter plugin

    Simple HtmlEditor character counter plugin


    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.

    Code:
    /**
     * 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

  2. #2
    Sencha User
    Join Date
    Oct 2007
    Posts
    57
    Vote Rating
    0
    pludikhu is on a distinguished road

      0  

    Default Great plugin - works out of the box

    Great plugin - works out of the box


    Hi FKilloran

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

    Thanks a lot!

    Patrick

  3. #3
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goias, GoiĆ¢nia
    Posts
    425
    Vote Rating
    6
    wemerson.januario is on a distinguished road

      0  

    Talking How to use

    How to use


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

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    210
    Vote Rating
    1
    KRavEN is on a distinguished road

      0  

    Default


    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.

    Code:
    /**
     * 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);
        }
    });

  5. #5
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    213
    Vote Rating
    0
    sanjshah is on a distinguished road

      0  

    Default


    Fintan,

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

    Thanks in advance!

  6. #6
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default


    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/

  7. #7
    Sencha User
    Join Date
    Nov 2008
    Location
    Pune
    Posts
    43
    Vote Rating
    0
    tameshwar is on a distinguished road

      0  

    Default


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

    this.editor.wrap.up("div.x-form-element") is null
    HTML Code:
    this.editor.wrap.up('div.x-form-element').appendChild(this.counter);
    Why it is giving error?