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

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

Kendo Editor 没有这些选项是对的。使用一些 JavaScript 和 jQuery 可以做到这一点。这个例子使用了 Kendo Core（像 ASP.NET MVC 这样的 Kendo Wrappers 应该仍然可以在 ASP.NET MVC 中工作，你不要在 JavaScript 中调用 $("#editor").kendoEditor()）。

这是我的jsFiddle 示例。

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);
});