htmlArea

A directory of browser-based WYSIWYG editors

  MAIN
INDEX
SEARCH
POSTS
WHO'S
ONLINE
LOG
IN

Home: htmlArea 3 (beta): htmlArea 2 & 3 archive (read only): htmlArea v3.0 - Add-Ons:
Character count plugin - help?


The htmlArea 2 & 3 editors have been discontinued.

We've made these forums available as a read-only reference and knowledge-base for people using or developing editors based on htmlArea 2 or 3.

Anyone who is interested in taking over version 2 or 3 is free to do so. All we ask is that you choose a new name that doesn't have "htmlarea" in it to avoid confusion with this site. We'll even give you a link in the directory to make it easier for people to find you. If you are developing or hosting an htmlArea based-editor under a new name, please submit it to our directory.

 


demuire
Novice

Oct 19, 2004, 12:15 AM

Post #1 of 13 (29270 views)
Shortcut
Character count plugin - help? Can't Post

I'm writing a character count plugin, one that will also limit the number of characters entered (so it fits in a database field).

Most everything is working well, except for one thing: It gets slower and slower as more text (and tags) are entered. This is a lot more obvious in IE than Mozilla, but it's still there.

On initial testing, it appears to be slowing down with the "keyup", "keypress", "keydown", "mouseover" etc events, because even if I get it to do nothing, it's still slow with these events in there. Take away the events and it's all good...

Any ideas? Any workarounds?

Thanks


kyberfabrikken
User

Oct 19, 2004, 8:01 AM

Post #2 of 13 (29264 views)
Shortcut
Re: [demuire] Character count plugin - help? [In reply to] Can't Post

if you hook up to the keyup-handler, your code will be executed very often. thus you should be carefull to make this code as efficient as possible. i'm having the same problem with the indite plugin, witch checks the entire document at keyup-event. one thing i found out is, that the getHTML() method is rather slow. I have seriously boosted performance by re-writing this. You may have a look at the sourcecode for indite.


demuire
Novice

Oct 19, 2004, 7:03 PM

Post #3 of 13 (29254 views)
Shortcut
Re: [kyberfabrikken] Character count plugin - help? [In reply to] Can't Post

Thanks HEAPS for that, it seems to work fairly quickly now. I had a look at your code, couldn't really understand some of it, but it was still very helpful. In particular I couldn't see how your re-written getHTML() method linked into the code...

It seems that just by replacing getHTML() with getInnerHTML() it seems to work a fair bit quicker? Are there any downsides to using getInnerHTML()? What's the difference between that and getHTML()?

Thanks again.


demuire
Novice

Oct 19, 2004, 7:19 PM

Post #4 of 13 (29253 views)
Shortcut
Re: [kyberfabrikken] Character count plugin - help? [In reply to] Can't Post

This is my code at the moment:


Quote
CharCounter.prototype.keyPress = function(editor, ev) {

var self = this;
var i18n = CharCounter.I18N;

var contents = this.editor.getInnerHTML();
var tempContents = contents;

contents = contents.replace(/<(.+?)>/g, '');//Don't count HTML tags
contents = contents.replace(/&nbsp;/g, ' ');//Count nbsp; as one keystroke
contents = contents.trim();

var countChars = contents.length;
var counterField = document.getElementById(fieldID);

if (countChars >= charLimit) {
counterField.value = charLimit + " of " + charLimit + " characters used";
if (countChars > charLimit) {
editor.setHTML(realContents);
alert("Textarea value can only be " + charLimit + " characters in length");
}
if (ev.keyCode != 8 // backspace
&& ev.keyCode != 13 // carriage return
&& ev.keyCode != 16 // shift
&& ev.keyCode != 17 // ctrl
&& ev.keyCode != 35 // end
&& ev.keyCode != 36 // home
&& ev.keyCode != 37 // left
&& ev.keyCode != 38 // up
&& ev.keyCode != 39 // right
&& ev.keyCode != 40 // down
&& ev.keyCode != 46 // delete
)
{
HTMLArea._stopEvent(ev);
}
} else {
realContents = tempContents;
counterField.value = countChars + " of " + charLimit + " characters used";
}
}


Not sure if it can be made any more efficient, but if anyone has any comments or suggestions I'm all open to ideas!


kyberfabrikken
User

Oct 20, 2004, 5:07 AM

Post #5 of 13 (29245 views)
Shortcut
Re: [demuire] Character count plugin - help? [In reply to] Can't Post

what is realContents doing ?


kyberfabrikken
User

Oct 20, 2004, 5:12 AM

Post #6 of 13 (29244 views)
Shortcut
Re: [demuire] Character count plugin - help? [In reply to] Can't Post

Yep, getInnerHTML() improves greatly. The getInnerHTML() method uses the native way of getting the html-source. The getHTML() method build the source by traversing the document through DOM. The downside of using getInnerHTML()( is that you won't get valid xhtml markup, since MSHTML returns html4 markup. This doesn't matter for your purpose, since the charactercount will still be the same, so you should be all fine with that.


demuire
Novice

Oct 20, 2004, 7:05 AM

Post #7 of 13 (29239 views)
Shortcut
Re: [kyberfabrikken] Character count plugin - help? [In reply to] Can't Post

realContents basically keeps track of the previous "good" version of the actual contents (including the HTML tags).

I've done this because previously I was just substituting the textarea with the substring of the stripped version, and thus everytime I pasted too much text in I lost all my formatting.

Using realContents isn't really optimal (would still prefer to paste as much as possible and strip the extra) but it was the only way I could think of doing it without stuffing around too much...

Do you have any suggestions?


kyberfabrikken
User

Oct 20, 2004, 7:20 AM

Post #8 of 13 (29238 views)
Shortcut
Re: [demuire] Character count plugin - help? [In reply to] Can't Post

I suppose you could stop the event no matter if it's allowed or not, and then use execCommand to paste the content in manually. If the pasted content is too big, you would have to shave off the excess first.

I'm not sure about the details, but that should work as far as i can tell.


demuire
Novice

Oct 20, 2004, 7:25 AM

Post #9 of 13 (29237 views)
Shortcut
Re: [kyberfabrikken] Character count plugin - help? [In reply to] Can't Post

Hmm, don't think I understand completely but I'll have a closer look at the code when I get back to work tomorrow. How do you access the pasted text by itself? If I could access just the pasted text then I could shave it based on how many characters I had left in the original text?


kyberfabrikken
User

Oct 20, 2004, 7:31 AM

Post #10 of 13 (29236 views)
Shortcut
Re: [demuire] Character count plugin - help? [In reply to] Can't Post

I believe you can hook up to the onbeforepaste event. There you could clear the window, and save it in a temp variable. After the paste has finished (i think there's a onafterpaste event ?), the content of the window is what has been pasted, so you pull that out, join the two, and reinserts.

Ofcourse that will totally dismiss the current cursor-position. I think i've once seen another approach, that does something like create a temporary paste-target, and set focus on the onbeforepaste event. Thus the pasted content ends up inside this temp-target. you can then pull it out of there, and insert it manually. It's a hack really, but for security-reasons you're not allowed to access the clipboard directly from javascript.


demuire
Novice

Oct 20, 2004, 7:40 AM

Post #11 of 13 (29234 views)
Shortcut
Re: [kyberfabrikken] Character count plugin - help? [In reply to] Can't Post

There's an onbeforepaste event as well? Is there a list of these events? Because as it stands I'm mainly pulling all these events from other plugins :)

Hmm, yes I completely forgot about the cursor position too, that would be a tricky one to work around...

Thanks!


demuire
Novice

Oct 20, 2004, 7:42 AM

Post #12 of 13 (29233 views)
Shortcut
Re: [demuire] Character count plugin - help? [In reply to] Can't Post

Re: cursor position, I'm guessing in IE I can probably make use of the caret position, but I can't think of any way to do it in Mozilla etc... Shame really.


kyberfabrikken
User

Oct 20, 2004, 10:14 AM

Post #13 of 13 (29231 views)
Shortcut
Re: [demuire] Character count plugin - help? [In reply to] Can't Post

You will have to mess around with _createRange and _getSelection - It's possible, but it's painful :)

One solution is to insert a temporary tag in the document, that represents the current selection/carret. Then after the document has been replaced, you select the custom element, and then remove it. I don't know if there's an easier way, but that one works.

 
 
 


Search for (options)