How to make Statistics Module fire for every keystroke?

17 posts, 0 answers
  1. bemara57
    bemara57 avatar
    57 posts
    Member since:
    Mar 2008

    Posted 24 Mar 2009 Link to this post

    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?
  2. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 26 Mar 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shonda
    Shonda avatar
    36 posts
    Member since:
    Apr 2009

    Posted 11 Jun 2009 Link to this post

    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.
  5. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 12 Jun 2009 Link to this post

    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.
  6. Shonda
    Shonda avatar
    36 posts
    Member since:
    Apr 2009

    Posted 12 Jun 2009 Link to this post

    That was easier that I made it out to be. Thanks
  7. Vandana
    Vandana avatar
    4 posts
    Member since:
    Jun 2009

    Posted 24 Jun 2009 Link to this post

    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.

  8. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 26 Jun 2009 Link to this post

    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.
  9. Vandana
    Vandana avatar
    4 posts
    Member since:
    Jun 2009

    Posted 26 Jun 2009 Link to this post

    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?
  10. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 01 Jul 2009 Link to this post

    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.
  11. Shrikant Kale
    Shrikant Kale avatar
    20 posts
    Member since:
    Oct 2009

    Posted 14 May 2010 Link to this post

    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

  12. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 14 May 2010 Link to this post

    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.
  13. Robin
    Robin avatar
    41 posts
    Member since:
    Sep 2012

    Posted 25 May 2014 in reply to Rumen Link to this post

    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



  14. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 27 May 2014 Link to this post

    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.

     
  15. Robin
    Robin avatar
    41 posts
    Member since:
    Sep 2012

    Posted 27 May 2014 in reply to Ianko Link to this post

    Thanks. I already modified the function and got the desired result as Built-in statistics module.
  16. Jignasha
    Jignasha  avatar
    2 posts
    Member since:
    Apr 2014

    Posted 02 Feb 2015 Link to this post

    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?
  17. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 05 Feb 2015 Link to this post

    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.

     
  18. Jignasha
    Jignasha  avatar
    2 posts
    Member since:
    Apr 2014

    Posted 05 Feb 2015 in reply to Marin Bratanov Link to this post

    Hi,
    thanks a lot. this works.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017