This is a migrated thread and some comments may be shown as answers.

How to make Statistics Module fire for every keystroke?

16 Answers 301 Views
Editor
This is a migrated thread and some comments may be shown as answers.
bemara57
Top achievements
Rank 1
bemara57 asked on 24 Mar 2009, 04:56 PM
In the RadEditor documentation, it says:

"Please note that you have to click with the mouse inside the content area for the statistics module to update, i.e. it will not update on every keystroke for the purposes of performance optimization."

So how can I make the statistics update for every keystroke?

16 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 26 Mar 2009, 05:52 PM
Hi bemara57,

Indeed, the RadEditor's Statistics module is updatable on Enter key press or click to not decrease performance. Nevertheless, you can easily implement a custom Statistics module which will be updated on key down. For your convenience I have attached such an example which you can test and use in your project.

Best regards,
Rumen
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Shonda
Top achievements
Rank 1
answered on 11 Jun 2009, 08:14 PM
This works great except for it is always 1 character count behind while typing. 

If I type 4 a's (aaaa) I will get a count of 3.  This count is ultimately corrected when move click in the editor, but as the user it typing the count they see will always be 1 behind.
0
Rumen
Telerik team
answered on 12 Jun 2009, 07:23 AM
Hi Shonda,

All you need to do is to replace the onkeydown event in the provided custom module code:

    this.get_editor().attachEventHandler("onkeydown",  function(){ selfPointer.CountCharAction(); });

with the onkeyup event

this.get_editor().attachEventHandler("onkeyup",  function(){ selfPointer.CountCharAction(); });

This should fix the problem.

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Shonda
Top achievements
Rank 1
answered on 12 Jun 2009, 12:50 PM
That was easier that I made it out to be. Thanks
0
Vandana
Top achievements
Rank 1
answered on 24 Jun 2009, 09:09 PM
Hi,

This custom module works perfect. I am trying to put max limit for the control. So I can do this very well. But when user pastes the HTML it allows to paste the content. How can I restrict the limit on Paste action.
I have to put max limit conditionally, so it will be good if I can programmatically or from javascript attach the onClientPasteHtml event. And in that event, it does not give plain text, it gives html text. So I don't know how to get plain text on the paste event and add only part of the text which is under max limit.

Please respond, it is critical.

0
Rumen
Telerik team
answered on 26 Jun 2009, 03:47 PM
Hi Vandana,

You can attach to the OnClientPasteHtml event on the client using the add_pasteHtml() client-side method, e.g.

this.get_editor().add_pasteHtml(function (){ alert("OnClientPasteHtml was executed"); });

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Vandana
Top achievements
Rank 1
answered on 26 Jun 2009, 04:52 PM
Hi,

Thank you for the reply. This works fine. I am able to attach to client paste event through add_paste method. But How can I check the length of the PLAIN text of the pasted content. As I told you, I want to restrict the user from adding more text than the specified length. The characters should not exceed the length. Is there any method in the args parameter passed to the add_pasteHTML method to get the plane text?
0
Rumen
Telerik team
answered on 01 Jul 2009, 02:07 PM
Hello Vandana,

The following line will return the content that is going to be pasted in the editor:

this.get_editor().add_pasteHtml(function (editor, args){ alert(args.get_value()); });

You should strip the HTML formatting with your own function and tags with some function or regular expression and count the symbols of the produced plain text content.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Shrikant Kale
Top achievements
Rank 1
answered on 14 May 2010, 06:11 AM
Hi Rumen,

I have a similar requirement where I need to update number of characters as user types in. I used the example you have provided and it worked for me.

But I have one problem with it. I am using ToolsFile.xml to list the modules for RadEdiotr. if I remove 'RadEditorStatistics' module from list then i get Javascript error "Telerik.Web.UI.Editor.Modules is undefined". Also text displaying number of words and number of characters does not appear.

I get error for following configuration

  <modules>
    <module name="MyModule" visible="true" enabled="true"/>
  </modules>

To overcome this problem i use following configuration

  <modules>
    <module name="RadEditorStatistics" visible="false" enabled="true"/>
    <module name="MyModule" visible="true" enabled="true"/>
  </modules>

I am not sure why I have to include 'RadEditorStatistics' module if am not using it.
Am I doing anything wrong here?

Regards
Shrikant

0
Rumen
Telerik team
answered on 14 May 2010, 12:55 PM
Hi Shrikant,

Due to optimization reasons you should register at least one of the built-in modules in case you want to register a custom module. If none of the built-in modules is not registered then to reduce the amount of outputted HTML content the code for the custom modules is also not imported. For that reason you should register at least the Statistics module and to hide it just set its Visible attribute to false, e.g.

<modules>
    <module name="RadEditorStatistics" visible="false" enabled="true"/>
    <module name="MyModule" visible="true" enabled="true"/>
  </modules>

You can also hide the ModuleManager tool <tool name="ModuleManager" /> so that the user is not able to show the statistics module.

Kind regards,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Robin
Top achievements
Rank 2
answered on 25 May 2014, 05:38 AM
Hi Rumen, 

I have a problem using your code when editor content were applied some html formatting (eg...line break, bold, underline, etc...).
When I type "123 456" as bold characters, built-in statistics module display correctly "words: 2, characters: 7".
But custom module display "words: 2, characters: 24".

Is there any way to remove html tags and get same result as built-in module? I know I can remove all possible html tags but I don't think it is a correct method. If possible, please provide a function that will perform as built-in module.

Thanks in advanced



0
Ianko
Telerik team
answered on 27 May 2014, 07:01 AM
Hello,

The custom character counter provided by Rumen should be used only as example and for guidelines to build a proper custom module.

Further requirements related to its functionality should be built by the developer.

As you can see this module is using plain regular expressions to strip the undesired characters. Building a regex to strip HTML tags is more related to a JavaScript knowledge and the exact approach to achieve the desired functionality can be done by multiple design decisions, which should be considered according the exact requirements.

I suggest following this Stackoverflow thread, in which more details about how to strip HTML tags is provided.

Regards,
Ianko
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Robin
Top achievements
Rank 2
answered on 27 May 2014, 07:07 AM
Thanks. I already modified the function and got the desired result as Built-in statistics module.
0
Jignasha
Top achievements
Rank 1
answered on 02 Feb 2015, 05:51 PM
Hi Rumen,

The code is working fine with one radeditor. What if I have multiple radeditor on one page? How can I implement this module for multiple editor?
0
Marin Bratanov
Telerik team
answered on 05 Feb 2015, 09:47 AM

Hi Jignasha,

A module can be considered an independent JS class, so you can include it in your editors' declaration, e.g.:

<telerik:RadEditor runat="server" ID="RadEditor1" Height="300px">
    <Modules>
        <telerik:EditorModule Name="MyModule" Enabled="true" Visible="true" />
        <telerik:EditorModule Name="RadEditorStatistics" Enabled="true" Visible="true" />
    </Modules>
</telerik:RadEditor>
 
<telerik:RadEditor runat="server" ID="RadEditor2" Height="300px">
    <Modules>
        <telerik:EditorModule Name="MyModule" Enabled="true" Visible="true" />
        <telerik:EditorModule Name="RadEditorStatistics" Enabled="true" Visible="true" />
    </Modules>
</telerik:RadEditor>


Regards,

Marin Bratanov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Jignasha
Top achievements
Rank 1
answered on 05 Feb 2015, 07:02 PM
Hi,
thanks a lot. this works.
Tags
Editor
Asked by
bemara57
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Shonda
Top achievements
Rank 1
Vandana
Top achievements
Rank 1
Shrikant Kale
Top achievements
Rank 1
Robin
Top achievements
Rank 2
Ianko
Telerik team
Jignasha
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or