Editor Character Counter

[David]

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   

[Atanas Korchev]

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

[Simon]

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

[Ivan Danchev]

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

[Simon]

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??

 

[Simon]

Thinking now I can just truncate it with:

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

before the call to update_desc_count()

[Ivan Danchev]

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