Kendo UI Editor max and minimum characters - kendo-asp.net-mvc

Question

I am using MVC extensions for Kendo UI editor. Is there an option to set the minimum and maximum number of characters excluding the HTML content.
I used StringLength attribute but that includes the HTML content.

Answer 1

You're right about Kendo Editor not having these options. It is possible to do this with some JavaScript and jQuery. This example is using Kendo Core (which the Kendo Wrappers like ASP.NET MVC should still work in ASP.NET MVC you do not call the $("#editor").kendoEditor() in the JavaScript).
Here's my jsFiddle example.
HTML:
<h3 class="text-primary">Text Only Count: <span id="textCount"></span></h3>
<div id="example">
<textarea id="editor" rows="10" cols="30" style="height:440px">
<p>Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.
<br />In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists, and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards and provides API for content manipulation.</p>
<p>Features include:</p>
<ul>
<li>Text formatting & alignment</li>
<li>Bulleted and numbered lists</li>
<li>Hyperlink and image dialogs</li>
<li>Cross-browser support</li>
<li>Identical HTML output across browsers</li>
<li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li>
</ul>
</textarea>
</div>
CSS:
.warning { color: red; }
JavaScript:
$(function () {
$("#editor").kendoEditor();
var minChar = 100;
var maxChar = 600;
var iframe = $("iframe");
// Change event for iframe body content
iframe.contents().find("body").on('keydown', function (e) {
//Clean up
$("#textCount").removeClass("warning");
// Get Body (.text() strips out HTML tags)
var data = $(this).text();
if (this.which < 32) {
return; // Do nothing
}
var isEditKey = (e.keyCode == 8 || e.keyCode == 46);
if (data.length == maxChar && !isEditKey) {
e.preventDefault();
} else if (data.length > maxChar) {
// Maximum exceeded
$(this).text(data.substring(0, maxChar));
} else if (data.length < minChar) {
$("#textCount").addClass("warning");
}
$("#textCount").text(data.length);
});
// OnLoad call to get starting count
var data = iframe.contents().find("body").text();
$("#textCount").text(data.length);
});