a Charcounter tested with Mozilla and IE "\plugins\CharCounter\"

[gocher / udo.schmal@…]

my charcounter uses the statusbar for output

char-counter.js:

// Charcounter for HTMLArea-3.0
// (c) Udo Schmal & L.N.Schaffrath NeueMedien 
// Distributed under the same terms as HTMLArea itself.
// This notice MUST stay intact for use (see license.txt).

function CharCounter(editor) {
	this.editor = editor;
};

CharCounter._pluginInfo = {
	name : "CharCounter",
	version : "1.0",
	developer : "Udo Schmal",
	developer_url : "http://www.schaffrath-neuemedien.de",
	sponsor       : "L.N.Schaffrath NeueMedien",
	sponsor_url   : "http://www.schaffrath-neuemedien.de",
	c_owner : "Udo Schmal & L.N.Schaffrath NeueMedien",
	license : "htmlArea"
};

CharCounter.prototype.onGenerate = function() {
	var self = this;
	var charCount = document.createElement("div");	
	this.charCount = charCount;
	charCount.innerHTML = HTMLArea._lc("Chars","CharCounter") + ": ";
	this.editor._statusBar.appendChild(charCount);

	var doc = this.editordoc = this.editor._iframe.contentWindow.document;
	HTMLArea._addEvents(doc, ["keyup", "keypress", "mousedown", "mouseup", "drag"], 
		function (event) {
      return self.keyPress(self.editor, HTMLArea.is_ie ? self.editor._iframe.contentWindow.event : event);		
	});
};

CharCounter.prototype.keyPress = function(editor, ev) {
  var contents = editor.getHTML();
	contents = contents.replace(/<(.+?)>/g, '');//Don't count HTML tags
	contents = contents.replace(/&nbsp;/g, ' ');//Count nbsp; as one keystroke
	this.charCount.innerHTML = HTMLArea._lc("Chars","CharCounter") + ": " + contents.length;
}

language file de.js:

// I18N constants

// LANG: "de", ENCODING: UTF-8
// Author: Udo Schmal, <udo.schmal@t-online.de>
//
// (c) Udo Schmal & L.N.Schaffrath NeueMedien 2004
// Distributed under the same terms as HTMLArea itself.
// This notice MUST stay intact for use (see license.txt).

{
  "Chars": "Zeichen"
}

[gocher / udo.schmal@…]

a little bit shorter! char-counter.js:

// Charcounter for HTMLArea-3.0
// (c) Udo Schmal & L.N.Schaffrath NeueMedien 
// Distributed under the same terms as HTMLArea itself.
// This notice MUST stay intact for use (see license.txt).

function CharCounter(editor) {
	this.editor = editor;
};

CharCounter._pluginInfo = {
	name : "CharCounter",
	version : "1.0",
	developer : "Udo Schmal",
	developer_url : "http://www.schaffrath-neuemedien.de",
	sponsor       : "L.N.Schaffrath NeueMedien",
	sponsor_url   : "http://www.schaffrath-neuemedien.de",
	c_owner : "Udo Schmal & L.N.Schaffrath NeueMedien",
	license : "htmlArea"
};

CharCounter.prototype.onGenerate = function() {
	var self = this;
	var charCount = document.createElement("div");
	this.editor._statusBar.appendChild(charCount);
	this.charCount = charCount;	
	var doc = this.editordoc = this.editor._iframe.contentWindow.document;
	HTMLArea._addEvents(doc, ["keyup", "keypress", "mousedown", "mouseup", "drag"], 
		function (event) {
      return self.keyPress(self.editor, HTMLArea.is_ie ? self.editor._iframe.contentWindow.event : event);		
	});
};

CharCounter.prototype.keyPress = function(editor, ev) {
  var contents = editor.getHTML();
	contents = contents.replace(/<(.+?)>/g, '');//Don't count HTML tags
	contents = contents.replace(/ /g, ' ');//Count nbsp; as one keystroke
	this.charCount.innerHTML = HTMLArea._lc("Chars","CharCounter") + ": " + contents.length;
}

[niko]

nice plugin!!! (has been requested several times allready...) i changed it a bit:

• htmlarea.js calls allready onKeyPress, you don't have to add your own event-listener (probably your solution is the better one, please test)
• update onToolbarUpdate AND onKeyPress
• more acurate char-counting
  • remove all htmlentities (eg & uml; or & #0815; , not only & nbsp; )
  • convert \n\r\t into spaces
  • remove double-spaces
• idea for limiting the characters
  • not finished:
    • we need a config-variable to activate it and to set the maximum chars
    • we need a way to figure out when to return true
    • this check should not only be done in onKeyPress, there are more methods to insert text (in onUpdateToolbar?)

// Charcounter for HTMLArea-3.0
// (c) Udo Schmal & L.N.Schaffrath NeueMedien 
// Distributed under the same terms as HTMLArea itself.
// This notice MUST stay intact for use (see license.txt).

function CharCounter(editor) {
    this.editor = editor;
};

CharCounter._pluginInfo = {
    name : "CharCounter",
    version : "1.0",
    developer : "Udo Schmal",
    developer_url : "http://www.schaffrath-neuemedien.de",
    sponsor       : "L.N.Schaffrath NeueMedien",
    sponsor_url   : "http://www.schaffrath-neuemedien.de",
    c_owner : "Udo Schmal & L.N.Schaffrath NeueMedien",
    license : "htmlArea"
};

CharCounter.prototype._lc = function(string) {
    return HTMLArea._lc(string, "CharCounter");
};


CharCounter.prototype.onGenerate = function() {
    var self = this;
    var charCount = document.createElement("div");
    this.editor._statusBar.appendChild(charCount);
    this.charCount = charCount;
};

CharCounter.prototype.onUpdateToolbar = function() {
    this.updateCharCount();
}

CharCounter.prototype.onKeyPress = function(ev) {
    var cnt = this.updateCharCount();

    //return true makes xinha ignoring the keypress, although for EVERY
    //keypress (incl. navigating, deleting etc...)
    //if(cnt > 100) return(true);
}

CharCounter.prototype.updateCharCount = function(ev) {
    editor = this.editor;
    var contents = editor.getHTML();
    contents = contents.replace(/<(.+?)>/g, '');//Don't count HTML tags
    contents = contents.replace(/([\n\r\t])/g, ' ');//convert newlines and tabs into space    
    contents = contents.replace(/(  +)/g, ' ');//count spaces only once
    contents = contents.replace(/&(.*);/g, ' ');//Count htmlentities as one keystroke
    contents = contents.replace(/^\s*|\s*$/g, '');//trim
    this.charCount.innerHTML = this._lc("Chars") + ": " + contents.length;
    return(contents.length);
}

[gocher / udo.schmal@…]

Yesterday a had the idea to create the CharCounter plugin for a CMS project, your changes are very good, on IE it's a little bit faster with htmlarea's event-listener! The idea for limiting the characters is very interesting, but for Database Fieldsize there must be a limitation of full contents and for the author there must be a limitation of chars!

Thus we need a one config-variable to activate it , one to set the maximum chars and one to set the maximum fieldsize!

But this is a lot of work and there are much other things to do in Xinha!

p.s.: I send gogo an email to get an svn-account!

[mharrisonline]

This is a very nice plugin. I think it would greatly benefit a large number of users (that are creating content) if it could also show word count( how many clumps of letters are there that are seperated by spaces or new lines?).

I tried to do this, but I couldn't figure out how to make it work. I was trying to adapt a modified script that I originally found on internet.javascript.com for showing the number of words in a text area as they are typed (it doesn't detect new lines though):

<html>
</html><body onLoad="wordCounter(document.forum.Q3367,document.forum.remLen)"></body>
<SCRIPT LANGUAGE="JavaScript">
function wordCounter(field, countfield) {
wordcounter=0;
for (x=0;x<field.value.length;x++) {
      if ((field.value.charAt(x) == " " && field.value.charAt(x-1) != " "))  {wordcounter++}  // Counts the spaces while ignoring double spaces, usually one in between each word.
      if (wordcounter > 250) {field.value = field.value.substring(0, x);}
      else {
countfield.value = wordcounter;}
      if (field.value.charAt(field.value.length-1) != " ") {countfield.value++;}
      }
   }
</script>
<FORM NAME=forum>
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="3" width=550>
<tr>
<td valign="top"><textarea name="Q3367" cols="40" rows="5" wrap="hard" onKeyDown="wordCounter(this.form.Q3367,this.form.remLen);" onKeyUp="wordCounter(this.form.Q3367,this.form.remLen);">This is a test!</textarea>
<br>Word Count: <input type=box readonly name=remLen size=3 value=0></td></tr>
<tr></tr>
</TABLE>
</FORM>
</body>
</html>

If the concern is the number of characters that would be submitted into a database field, wouldn't the total characters of HTML also be important?

Maybe the status bar could say something like:

Word Count: 323 | Text Characters: 2261 | Total HTML: 2721

That would be so handy, and word processor-like. :-)

[gocher]

Change the updateCharCount function like this and the CharCounter plugin show the number of words too! (Words: 97 | Chars: 652)

CharCounter.prototype.updateCharCount = function(ev) {
    editor = this.editor;
    var contents = editor.getHTML();
    contents = contents.replace(/<(.+?)>/g, '');//Don't count HTML tags
    contents = contents.replace(/([\n\r\t])/g, ' ');//convert newlines and tabs into space    
    contents = contents.replace(/(  +)/g, ' ');//count spaces only once
    contents = contents.replace(/&(.*);/g, ' ');//Count htmlentities as one keystroke
    contents = contents.replace(/^\s*|\s*$/g, '');//trim
+    var words=0;
+    for (var x=0;x<contents.length;x++) {
+      if (contents.charAt(x) == " " )  {words++}
+    }
-    this.charCount.innerHTML = this._lc("Chars") + ": " + contents.length;
+    this.charCount.innerHTML = this._lc("Words") + ": " + words + " | " + this._lc("Chars") + ": " + contents.length;
    return(contents.length);
}

[gocher]

Change the updateCharCount function like this and the CharCounter plugin show the number of words too! (Words: 97 | Chars: 652)

CharCounter.prototype.updateCharCount = function(ev) {
    editor = this.editor;
    var contents = editor.getHTML();
    contents = contents.replace(/<(.+?)>/g, '');//Don't count HTML tags
    contents = contents.replace(/([\n\r\t])/g, ' ');//convert newlines and tabs into space    
    contents = contents.replace(/(  +)/g, ' ');//count spaces only once
    contents = contents.replace(/&(.*);/g, ' ');//Count htmlentities as one keystroke
    contents = contents.replace(/^\s*|\s*$/g, '');//trim
+    var words=0;
+    for (var x=0;x<contents.length;x++) {
+      if (contents.charAt(x) == " " )  {words++}
+    }
-    this.charCount.innerHTML = this._lc("Chars") + ": " + contents.length;
+    this.charCount.innerHTML = this._lc("Words") + ": " + words + " | " + this._lc("Chars") + ": " + contents.length;
    return(contents.length);
}

[mharrisonline]

<happy>Wow!</happy>

[mharrisonline]

I've noticed that this plugin seems to stop working if you paste in a lot of text, say from a Word document, or if you open an existing Web page. I'm using IE6.

[mharrisonline]

Actually, I wanted to use the word counter option, which is really cool, but I can't because I only use full page config mode, and the counter very noticeably freezes after you view source, like many other Xinha functions and plugins... :(

[gogo]

Is this still an issue with the recent FullPage? fixes?

[anonymous]

<img src="" alt="" />

<span>

wat krijgen we nou

[mharrisonline]

Is this still an issue with the recent FullPage? fixes?

No, it all works fine now.