Wysihtml5编辑器-限制字符数

Wysihtml5 editor - Limit number of characters

本文关键字:字符 编辑器 Wysihtml5      更新时间:2023-09-26

我有这个:

<div class="row">
    <div class="col-md-11">
        <label for="" class="control-label">Description<span>*</span></label>
        @Html.TextAreaFor(m => m.Description, new { @class = "editor", @maxlength = "500" })<br />
        @Html.ValidationMessageFor(model => model.Description)
     </div>
</div>

和wysihtml5编辑器的js(使用Razor引擎):

<script type="text/javascript">
    $('.editor').wysihtml5({
        stylesheets: "/Content/css/wysiwyg-color.css",
        charset: "utf-8"
    })
</script>
所以基本上我要做的是限制字符数(最大500字符)在这个字段。正如您所看到的,我已经在@Html.TextAreaFor中设置了maxlength属性,但是它不起作用。谁能告诉我怎么做这个?提前感谢。

使用id代替class。
Wysihtml5使用这个id来创建iframe。

iframe的id为"[your textarea id]-sandbox"
因为这个元素是动态创建的,所以我更新了下面的代码。

$(document).ready(function{
    var PreventSubmitFlag=false;
    $('#editor').sibling("#editor-sandbox").find("body").on("keyup", function(e){
        var content = $(this).html();
        if(content.length>500){
            alert ("500 characters is the limit!");
            PreventSubmitFlag=true;
        }else{
            PreventSubmitFlag=false;
        }
    });
});

使用PreventSubmitFlag禁用提交按钮。div;)