Welcome Guest Search | Active Topics | Sign In | Register

Javascript Character Counter for Editor Options
Tate
Posted: Friday, March 20, 2009 10:38:05 AM
Rank: Newbie
Groups: Member

Joined: 3/19/2009
Posts: 2
I usually use the following code I found for a character counter using a Textarea (for input) and a Readonly textbox that changes the character count on the fly depending on how many characters you have entered into the textarea, could someone help me implement this into the Editor? I'm strugglin, and already have spent hours to get me nowhere!..Thanks!....

Code: HTML/ASPX
<input readonly="readonly" type="text" name="remLen" 
id="remLen" size="3" maxlength="4" value="700" />



Code: HTML/ASPX
<textarea name="ctl00$cphPage$CtlFallComments1$txtComments" 
rows="2" cols="20" id="ctl00_cphPage_CtlFallComments1_txtComments" 
class="commText" onKeyPress="return textboxMultilineMaxNumber(this,700); 
textCounter(this,remLen,700);" onKeyUp="textCounter(this,remLen,700);" 
onKeyDown="textCounter(this,remLen,700);">
</textarea>



Code: JavaScript
function textboxMultilineMaxNumber(txt,maxLen){
        try{
        if(txt.value.length > (maxLen))return false;
        }catch(e){
        }
        }
        
        function textCounter(field,cntfield,maxlimit) {
        if (field.value.length > maxlimit) {
        field.value = field.value.substring(0, maxlimit);
        }
        else {
        cntfield.value = maxlimit - field.value.length;
        }
        }
eo_support
Posted: Friday, March 20, 2009 11:06:03 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,201
Hi,

You will need to understand how our client side JavaScript API works first. Our Editor is not a single HTML element. So you can not handle it the same way as you are handling a single HTML element such as a TextArea. Instead you want to go over this topic first:

http://doc.essentialobjects.com/library/1/clientapi_howto.aspx

The major differences are:

1. You are dealing with a control, not an element. So whatever properties/events that exists on the element does not necessary exist on the control. See the control reference for a full list of what's avaliable on the control:

http://doc.essentialobjects.com/library/1/eo.web.editorproperties.aspx

2. All event handlers for the control takes a function name, not a function call. For example, with TextArea you can use:

onKeyDown="textCounter(this,remLen,700);"

Where with our editor, you would use:

ClientSideOnChange="textCounter"

Note you do not pass any parameters. For most client events, the control will pass a list of predefined parameters to your function, so you can not just use your own parameter list. This is similar to standard .NET event handler, where the first parameter is always sender and the second is always event arguments. ClientSideOnChange in this case does not take any parameters.

3. Inside your textCounter, you will need to rely on methods provided by the client side Editor object to perform whatever action you would like to perform. See here for a list of what's available on the client side Editor object:

http://doc.essentialobjects.com/library/1/jsdoc.public.editor.aspx

In a nutshell, you will need to strictly follow the reference because that tells you what is available. Anything that you do not see in the reference does not exist.

If you are still confused, you can take a look of these two samples to get an idea of how client side API works:

http://demo.essentialobjects.com/Default.aspx?path=Menu\menu_programming\_i2\menu_client_event
http://demo.essentialobjects.com/Default.aspx?path=Editor\_i2\_i1

You have the full source code of the sample project. So try open it with Visual Studio should help you to get the full picture.

Once you are familiar with client side API, you can call getHtml to get the HTML text, then count words based on that if you already have code to count words based on HTML. Counting words based on HTML is not a very easy thing because all those tags. You can Google "HTML word counts" to find solutions/recommendations for this on the Internet.

Another option is to call getCurrentElement to get the current element, then walk up the DOM element chain until you find the body element (the editor contents is a separate document, so it has a separate and body element than your main page). Once you have the body element, you can get the body's innerText and then count words based on that. Note words count based on innerText may not be accurate. For example, if you have a table with two cells with the first cell containing word "one" and second cell containing word "two", innerText would strip off the table and return you one word "onetwo".

Hope this helps.

Thanks!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.