Character count does not work in CKEditor for ASP.NET

[Anna Tomanek]

Reported on the community forum: ​http://cksource.com/forums/viewtopic.php?f=11&t=24649

Two problems: both work fine using a normal asp.net textbox control. But neither works using the asp.net CKEditor control.

PROBLEM 2: I can't get character count using javascript (max char issue)

My code works on a normal textbox control, but doesn't with the asp.net CKEditor control. If you want to see the code, let me know.

[Jakub Ś]

Would be nice if you could provide reduced sample web-app / file showing the problem - something with what we will be able to reproduce the ticket using plain CKEditor for ASP.NET.

[nanonerd]

Hi, this first part demonstrates use of the code to prevent user from exceeding max char allowed. Max is set to 3. When user types fourth key in TextBox1, message pops up. This works.

xxxxxxxxxxxxxxxx

<script type="text/javascript">

function Count(text,long) {

var maxlength = new Number(long);

if(document.getElementById('<%=TextBox1.ClientID%>').value.length > maxlength){

text.value = text.value.substring(0,maxlength); alert("Max " + long + " chars ..."); }

}

</script>

<asp:TextBox ID="TextBox1" runat="server" onKeyUp="javascript:Count(this,3);" onChange="javascript:Count(this,3);"

TextMode="MultiLine" Height="60" Width="200px"></asp:TextBox>

xxxxxxxxxxxxxxxxxxxx

This next part tries to use the Script (same script) on the aspnet CKEditor control (instead of Textbox1). All I did was change the getElementById value. But it doesn't work.

I'm using aspnet CKEditor 3.6.2 in MS Web Developer 2010 Express. Browsers are Firefox, IE, Opera (all up to date versions).

xxxxxxxxxxxxxxxxx

<script type="text/javascript">

function Count(text,long) {

var maxlength = new Number(long);

if(document.getElementById('<%=CKEditor1.ClientID%>').value.length > maxlength){

text.value = text.value.substring(0,maxlength); alert("Max " + long + " chars ..."); }

}

</script>

<CKEditor:CKEditorControl ID="CKEditor1" runat="server"

onKeyUp="javascript:Count(this,3);" onChange="javascript:Count(this,3);" FontSizeSizes="8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;" Width="450" Height="60" ToolbarFull="Bold|Italic|Underline|FontSize" ResizeMaxHeight="120" ResizeMaxWidth="450" UIColor="#FF9933" ></CKEditor:CKEditorControl>

[Jakub Ś]

You are referring to CKEditor and not textbox so the below is invalid:

if(document.getElementById('<%=CKEditor1.ClientID%>').value.length 

You should use CKEditor API to get data from it E.g. use ​getData() method (returns HTML) or perhaps using ​DOMApi.
The problem is that there is no method to simply get text from CKEditor user has to either get HTML and use regex on it or walk the DOM and get text from all the nodes (both sound slow)

As for the maxLength this is not supported by CKEditor Control - I have described this issue here #8936.

Closing this one as an invalid.

[Jakub Ś]

btw. here are some links I have found on Google - perhaps they will be any use to anyone: ​http://forums.asp.net/t/1657984.aspx/1
​http://sourceforge.net/tracker/index.php?func=detail&aid=1389555&group_id=75348&atid=737639
​http://www.rodi.nu/blog/2010/06/ckeditor-maximum-length/