Editor Character Counter

7 posts, 0 answers
  1. David
    David avatar
    5 posts
    Member since:
    Aug 2013

    Posted 09 Dec 2013 Link to this post

    Hello, I've been trying to get some character counter code to work with the Kendo UI Editor control.  The code for the counter is here: scriptiny

    It works great for the other controls I have on the page (textboxes and a file upload control), but for some reason I cannot get it to work with the editor control.  The only code I have in the $("#editor").kendoEditor();  script block is "All Tools" code that I found on the demo page for the editor.  But even if I take that out it doesn't work.  Anyone have any suggestions on why it isn't working?  Or maybe some sample code if you have implemented a character counter for the editor control.

    Thanks,

    David   
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 10 Dec 2013 Link to this post

    Hello,

    The linked jQuery snippet will work only for plain text elements ("input" and "textarea" tags). The Kendo UI Editor produces HTML and simple character counting will not work because of the HTML tags - they will be included in the count which isn't obvious to the end user. This is the reason we don't have a character limiter built in - we can only support a character counter which will display the count but not strip any extra characters. Here is a live demo: http://jsbin.com/oKUBoWuz/1/edit

    Regards,
    Atanas Korchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Simon
    Simon avatar
    4 posts
    Member since:
    Mar 2016

    Posted 21 Jul Link to this post

    I was looking at this solution for a character counter for the Kendo editor and it looks good, wondering if there's a way to prevent further input in the editor if a certain count is reached. So my counter would count down from say 4500 characters to zero and once zero is reached input is stopped:

    function update_count() {
      var editor = $("#Description").data("kendoEditor");
      var html = editor.value();
      // Remove the HTML tags by using jQuery.fn.text()
      var text = $("<div>").html(html).text();
      $("#count").text(4500 - text.length);
     
          if (4500 - text.length == 0) {
             // prevent further input...
          }
    }  

     

    I don't want to add a validation function on submit of the containing form, just want to prevent further input.

    Thanks

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1265 posts

    Posted 25 Jul Link to this post

    Hello Simon,

    You can prevent the user's input by checking the counter and preventing the Editor's keydown and paste events as shown in this sample dojo.

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Simon
    Simon avatar
    4 posts
    Member since:
    Mar 2016

    Posted 26 Jul in reply to Ivan Danchev Link to this post

    Thanks, that works quite nicely except the paste event doesn't fire until after I finish pasting. So if I paste more than the allowed number of characters the editor will allow this (but it will not allow me to paste again). Ideally I'd truncate the input as soon as the text is pasted but if I have a function truncate_desc():

    function truncate_desc() {
         
        var maxlength = $("#Description").attr('maxlength');     
        var editor = $("#Description").data("kendoEditor");
        var html = editor.value();
        var text = $("<div>").html(html).text();       
         
        if (text.length > maxlength)
        {
             
            alert("Too much text"); // truncate the input at  maxlength
        }
    }

     and call it on the paste event:

     

    ...

     

    paste: function(e) {
      truncate_desc();
      desc_count = update_desc_count();
      if(desc_count <= 0) {
        e.preventDefault();
      }
     
    }, 

     

    editor.value() will be empty string on the initial paste of text. Is there an event that fires after the text is actually pasted that i can truncate the input if necessary??

     

  6. Simon
    Simon avatar
    4 posts
    Member since:
    Mar 2016

    Posted 26 Jul in reply to Simon Link to this post

    Thinking now I can just truncate it with:

    e.html = e.html.substring(0,maxlength);

    before the call to update_desc_count()

  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1265 posts

    Posted 28 Jul Link to this post

    Hi Simon,

    I am glad you have found a valid approach of removing the extra characters from the pasted content through the paste event data (e.html).

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top