Question

我正在使用Kendo UI编辑器的MVC扩展。是否可以选择设置除HTML内容之外的最小和最大字符数。

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

Answer 1

你对剑道编辑没有这些选择是正确的。使用一些JavaScript和jQuery可以做到这一点。这个例子使用的是Kendo Core（像ASP.NET MVC这样的Kendo Wrappers仍然可以在ASP.NET MVC中工作，你不会在JavaScript中调用$（＆＃34;＃editor＆＃34;）。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);
});

Kendo UI Editor最大和最小字符

1 个答案: