AngularJS + TinyMCE:ng-maxlength不能用于<textarea>

Question

我想限制最大文本长度,使其不超过DB中的列长度.我把这个限制放在后端,现在我想在前端强制执行它.

我使用带有angular-ui-tinymce v0.0.12插件的TinyMCE v4.3.3 和AngularJS v1.4.6.

JS:

var tinymceOpts = {
    toolbar: false,
    menubar: false,
    // do not add <p></p> from the start:
    forced_root_block: ''
}

HTML:

<textarea ui-tinymce="tinymceOpts"
          ng-model="body"
          name="body"
          ng-maxlength="100"
          required>
    {{ body }}
</textarea>
<span ng-show="form.body.$error.maxlength" class="error">
    Reached limit!
</span>

如您所见,我ng-maxlength在这里使用属性来限制长度<textarea>.

预期结果:仅当内容长度(包含标签)超出限制(在这种情况下为100个字符)时,才会验证输入并显示错误消息.

实际结果:

当输入包含一些文本(无论长度是多少)时,表单输入状态被设置为无效.

---

为测试计算字符数(在右下角):

this.getCharCount = function() {
    var tx = editor.getContent({format: 'raw'});
    return tx.length;
};

Answer 1

这里的问题是TinyMCE使用自己的<iframe>编辑文本内容并<textarea>在特殊事件时将它们写回给您。难怪ng-maxlength在这里不起作用。

为了实现您想要的效果，您需要检查编辑器内容本身，并禁止输入更多字符，以防达到最大长度。