Results 1 to 7 of 7

Thread: Simple HtmlEditor character counter plugin

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Ext User
    Join Date
    Sep 2008
    Posts
    1
    Vote Rating
    0
      0  

    Default 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
      0  

    Default 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 Premium User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Goinia - GO, Brazil
    Posts
    640
    Vote Rating
    49
      0  

    Talking 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
      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
    Sencha User
    Join Date
    Nov 2008
    Location
    Pune
    Posts
    43
    Vote Rating
    0
      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?

  6. #6
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    213
    Vote Rating
    0
      0  

    Default

    Fintan,

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

    Thanks in advance!

  7. #7
    Sencha - Ext JS Dev Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,056
    Vote Rating
    19
      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/

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •