Character count in editor

Quick and dirty would be a regular expression that wiped out <*>.

Although that bit about the spell button in the spirit of the source button (keeping in mind the plug-in-ability of various spellers) got me to thinking that everything is elements and nodes and whatnot... bet there is a relativly clean way to extract the 'plain text' so to speak, and 'do stuff' with it (maybe sticking it back in the same place,after, even).

Well. Gotta go. As for the keypress thing... sticking it in a table and putting a keypress on that wouldn't work, eh?

this does it tag by tag (if you looped it) or you could remove the "aTagName" var to be indiscriminate(sp?),,,

<!--
AUTHOR: MIKE GOLDING
SOURCE: http://www.mikezilla.com
-->
function removeHTMLblock(aSourceString, aTagName){
regexp= new RegExp ("<" + aTagName + "[^.]*\/" + aTagName + ">", "gi");
vStrippedHTML = aSourceString.replace(regexp,"");
alert(vStrippedHTML);
}

Whoops.

function RemoveHTML( strText )
{
var regEx = /<[^>]*>/g;
return strText.replace(regEx, "");
}

whacks 'em all... that other one is more along the lines of stripping <script> or some such for people... maybe an option in the fckconfig? Or was that going away? I'm goin g to sleep now!

Hello,

Thanks for the feedback, I was pleasantly surprised by the responsiveness of the ML

Here is the JS solution I implemented (compilation of the previous messages), hope this helps someone

--
1) Call the FCKeditor (textarea was called abstract_fr)

<script type="text/javascript">
var oFCKeditor1 = new FCKeditor('abstract_fr');
oFCKeditor1.BasePath = '/fckeditor/';
oFCKeditor1.Value = '';
oFCKeditor1.Height = '500';
oFCKeditor1.Width = '600';
oFCKeditor1.Create();
</script>


2) JS to extract the characters number in html or plain texts

<script type="text/javascript">
function countChars(field, flag) {
editorContent = getFCKContent(field, flag);
alert(editorContent.length);
}

function getFCKContent(field, flag) {
var api=FCKeditorAPI.GetInstance(field);

if (flag == "html"){
var html = api.GetXHTML();
alert(html);

return html;
}

if (flag == "text"){
var html = api.GetXHTML();
RemoveHTML(html);

var plain_text = RemoveHTML(html);
alert(plain_text);

return plain_text;
}
}

function RemoveHTML( strText )
{
var regEx = /<[^>]*>/g;
return strText.replace(regEx, "");
}
</script>


3) Buttons that either show html chars nb or plain text nb

<input type="button" name"Submit" value="Count characters html" onclick="countChars('abstract_fr', 'html');">
<input type="button" name"Submit" value="Count characters plain text " onclick="countChars('abstract_fr', 'text');">
--

GBO

Here you go. I'm hoping that if I answer enough questions somebody will help me figure out how to attach an onkeyup event to the editor.


<script type="text/javascript">
function getFCKContent(field) {
var api=FCKeditorAPI.GetInstance(field);
return api.GetXHTML();
}

function countChars(field) {
editorContent = getFCKContent(field);
alert(editorContent.length);
}
</script>
<input type="button" onclick="countChars('FCKEditor_instance_name');">

Hi,

Thanks for the JS code it works fine for me. But I would also like to be able to count the characters without all the html tags.

Any thought how to do that ?

Is there any function similar to this one

return api.GetXHTML();

that only return the -WYSIWYG text- ?

Thanks

BTW is there any documentation which describe all the functions used in fckeditor ? So far, I haven't found one.

GBO

I have the same issue to count character when onkeyup, onkeydown events happen. Hi, jonbigelow, have you found the solution?

I guess this thread is slowly changing to a key event thread.

I also tried the onkeypress and and onkeychange event handlers. No luck. It would almost seem like the editor has an inherent function somewhere that inhibits them. Although, it doesn't seem likely.

In any case, many people are having this problem so hopefully a developer or a code guru can help us out.

thx.

This script will display the character count in an input text field as you type.

The textfield is named 'textlength', the fckeditor is named 'FCKeditor1'. The script is inserted directly after the FCKEditor is defined.


onchangeListener = function() {
document.getElementById("textlength").value = FCKeditorAPI.GetInstance("FCKeditor1").GetHTML().length;
}



setTimeout('delayHook();',1000);
function delayHook()
{
FCKeditorAPI.GetInstance("FCKeditor1").EditorDocument.attachEvent( "onkeydown",onchangeListener);
}


I would like to get rid of the dely hook, though...

best regards
-Kristian

The script by kristian works great.
To get rid of
setTimeout('delayHook();',1000);
(as it gives javascript error FCKEditorAPI is undefined:), just replace it with
function FCKeditor_OnComplete(){
delayHook();
}

I am doing something similar with a character counter that counts backwards. It works fine with the old system that used a textarea but now I am trying to convert it to use the FCKEditor.

The Editor has a limit of 3500 chars and if the content goes over that limit I need to stop it at the point it reaches the limit.

I am having problems with one of my functions I am getting a FCKeditorAPI is not defined error. I also cannot seem to reset the value of the editor when some pasted content takes it over the limit.

My code is this.

//two functions that hopefully do the counting and limit the size
function updateFCKCounter(objFCK, objCounter, intChars)
{
var objCounter = document.getElementById(objCounter);
var FCKHTML = FCKeditorAPI.GetInstance(objFCK).GetHTML() ;
var FCKLen = FCKHTML.length ;

if (FCKLen > intChars){
var sAllowedHTML = FCKHTML.substring(0, intChars);
//Can you do this? Does it have a value property I can set? If not how do I do it? FCKeditorAPI.GetInstance(objFCK).value = sAllowedHTML
}else{
objCounter.value = (intChars - FCKLen);
}

}

function limitFCKSize(objFCK, limit)
{
//this line is where I am getting the FCKeditorAPI is not defined error.
var FCKLen = FCKeditorAPI.GetInstance(objFCK).GetHTML().length;
if(FCKLen >= limit) {
alert('This field is limited to ' + limit + ' characters and spaces.');
return false;
}
}

//then further down in body of my html
<dt><label for="strJobDesc">Job Description:<span class="required">*</span></label></dt>
<dd>
<%
objFCKeditor.BasePath = sBasePath
objFCKeditor.Value = objJob.JobDesc
objFCKeditor.Height = 400
objFCKeditor.ToolbarSet = "JobAdvert"
objFCKeditor.Create "strJobDesc"
%>
<script type="text/javascript">
<!--
onchangeListener = function(){
updateFCKCounter("strJobDesc", "bulletcount", 3500)
}
updateCounter = function(){
limitFCKSize("strJobDesc", 3500)
}
function FCKeditor_OnComplete(){
delayHook();
}
function delayHook()
{

if(window.attachEvent){
FCKeditorAPI.GetInstance("strJobDesc").EditorDocument.attachEvent( "onkeypress",updateCounter);
FCKeditorAPI.GetInstance("strJobDesc").EditorDocument.attachEvent( "onkeyup",onchangeListener);
FCKeditorAPI.GetInstance("strJobDesc").EditorDocument.attachEvent( "onkeydown",onchangeListener);
FCKeditorAPI.GetInstance("strJobDesc").EditorDocument.attachEvent( "onpaste",onchangeListener);
FCKeditorAPI.GetInstance("strJobDesc").EditorDocument.attachEvent( "onupdate",onchangeListener);
}else{
FCKeditorAPI.GetInstance("strJobDesc").EditorDocument.addEventListener( "keypress",updateCounter,false);
FCKeditorAPI.GetInstance("strJobDesc").EditorDocument.addEventListener( "keyup",onchangeListener,false);
FCKeditorAPI.GetInstance("strJobDesc").EditorDocument.addEventListener( "keydown",onchangeListener,false);
FCKeditorAPI.GetInstance("strJobDesc").EditorDocument.addEventListener( "paste",onchangeListener,false);
FCKeditorAPI.GetInstance("strJobDesc").EditorDocument.addEventListener( "update",onchangeListener,false);
}
}
//-->
</script>
<br /><span class="notes" style="width:100%;">Main text of this advertisement [max length 3500 characters]
<br />Characters Remaining: <input type="text" id="bulletcount" disabled="disabled" readonly="readonly" size="4" value="3500" name="bulletcount" onclick="updateFCKCounter('strJobDesc','bulletcount',3500);" />

</span></dd>

The counter does seem to be counting downwards and when it reaches the limit I do get a pop up although if I try and paste content in that takes the editor over the 3500 limit it doesn't trim it off at the breakpoint.
I don't know if you can use
FCKeditorAPI.GetInstance(objFCK).value = sAllowedHTML
to try and set the value of the editor window to the content I want. If not what is the property I can use.
Also I don't understand why I am getting the FCKeditorAPI not defined error.

Any help would be much appreciated and I thank you in advance.