kendo-asp.net-mvc - Kendo UI 编辑器最大和最小字符数

Question

我正在为 Kendo UI 编辑器使用 MVC 扩展。是否有设置不包括 HTML 内容的最小和最大字符数的选项。

我使用了 StringLength 属性，但这包括 HTML 内容。

Answer 1

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

这是我的 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);
});