View Full Version : How to implement character count down in HtmlEditor?

14 Dec 2010, 8:43 AM
I want to somehow display the remaining characters in an HtmlEditor as the user types. Something like:

"43 of 500 characters remaining..."

in a label on the Panel. Any help on implementing this would be appreciated.

14 Dec 2010, 9:15 AM
you'll need to strip HTML to get a real count :-\

good luck with that.

14 Dec 2010, 9:40 AM
At first I followed this example:

But in the end I failed at this. I was saving to the database up to 4000 characters so I also wanted to include the HTML as characters in my count (otherwise database insert fails), but the component itself has issues leading to user confusion

Problem is, by default, a blank editor has <br> or <p>&nbsp;</p> , causing my users to complain that a blank editor was showing counts of 4, (or more). I had to strip out the code for character counts because it led to more complaints than it solved

All that, plus the fact that insertunorderedlist and insertorderedlist in MSIE do not behave as they should have caused me to dread using this particular component.

if you get it all working, please post code

14 Dec 2010, 9:48 AM
Forgot it. Sounds much too difficult and not worth my time. I guess I'll just find a more capable editor one of these days...

14 Dec 2010, 9:51 AM
I have had a little bit of success with this one

but I have also read complaints that it adds a lot of lines of code to your app to include it.

Vinylfox has some plugins which make the default HtmlEditor a little more bearable

14 Dec 2010, 10:11 AM
Yeah, check my signature for links to the HtmlEditor Plugin set (https://github.com/VinylFox/ExtJS.ux.HtmlEditor.Plugins).

Nothing really solves the blank editor content and the list problems in IE though. The ExtJS HtmlEditor uses the native HTML editing that is built into browsers, thats how the code for the editor is kept so small - to replace this functionality entirely takes a bunch of code.

14 Dec 2010, 7:45 PM
Look at the length for innerText not innerHTML as innerText gives you the rendered text not the raw HTML code. I used the following just to display an alert message. I added the following to my htmleditor code.

listeners: {
initialize: function(editor) {
if (Ext.isIE) {
Ext.EventManager.un(this.getDoc(), 'keydown', this.fixKeys, this);
Ext.EventManager.on(this.getDoc(), Ext.isGecko ? 'keypress' : 'keydown', function(e) {
//action here
var inText=Ext.getCmp('NewsEditor').getEditorBody().innerText;
}, this);
if (Ext.isIE) {
Ext.EventManager.on(this.getDoc(), 'keydown', this.fixKeys, this);