PDA

View Full Version : Simple HtmlEditor character counter plugin



FKilloran
30 Sep 2008, 6:12 AM
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
3 Jan 2009, 11:54 AM
Hi FKilloran

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

Thanks a lot!

Patrick

wemerson.januario
3 Jan 2009, 12:42 PM
Hello, Congratulation! How to use this? Can someone post a zip file of the files needed. thanks.

KRavEN
17 Apr 2009, 8:19 AM
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
17 Apr 2009, 11:56 AM
Fintan,

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

Thanks in advance!

mschwartz
17 Apr 2009, 12:45 PM
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
17 May 2012, 1:50 AM
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?