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

Editor Character Counter

6 Answers 1259 Views
Editor
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 09 Dec 2013, 06:35 PM
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   

6 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 10 Dec 2013, 08:17 AM
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!
0
Simon
Top achievements
Rank 1
answered on 21 Jul 2017, 06:41 PM

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

0
Ivan Danchev
Telerik team
answered on 25 Jul 2017, 09:53 AM
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.
0
Simon
Top achievements
Rank 1
answered on 26 Jul 2017, 06:33 PM

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

 

0
Simon
Top achievements
Rank 1
answered on 26 Jul 2017, 06:44 PM

Thinking now I can just truncate it with:

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

before the call to update_desc_count()

0
Ivan Danchev
Telerik team
answered on 28 Jul 2017, 11:19 AM
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.
Tags
Editor
Asked by
David
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Simon
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or