Kendo UI 编辑器最大和最小字符

Question

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

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

Answer 1

您对 Kendo Editor 没有这些选项的看法是对的。 可以使用一些 JavaScript 和 jQuery 来做到这一点。 此示例使用 Kendo Core（像 ASP.NET MVC 这样的 Kendo 包装器应该仍然可以在 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);
});

Answer 2

非常老的问题，但可能会帮助现在寻找答案的人。以下是 Kendo/Telerik 文档的链接，用于向编辑器添加自定义验证器来检查字符数。有一个示例仅对文本进行计数，另一个示例则对 html 和文本进行计数。

Kendo UI 编辑器最大和最小字符

我用它来防止剑道编辑器中的错误和文本截断，效果很好。它还可以处理粘贴。当您单击文本区域之外的正文或单击“提交”时，此功能将生效。可以修改它以使用其他触发器来检查验证。