AngularJS + TinyMCE：ng-maxlength 不适用于 <textarea>

Question

我想限制最大文本长度，使其不超过数据库中的列长度。我已经在后端设置了这个限制，现在我想在前端强制执行它。

我使用TinyMCE v4.3.3 和angular-ui-tinymce v0.0.12 插件和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 在这里不起作用。

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

Answer 2

我设法让它工作了！必须在 AngularJS 中禁用 SCE 模式：

angular.module('myApp', ['ui.tinymce'])
.config(['$sceProvider', function($sceProvider) {
    $sceProvider.enabled(false);
}])
.controller('myCtrl', ['$scope', function($scope) {
    // ...
}]);

jsFiddle

！当心安全漏洞！

严格上下文转义 (SCE) 是一种模式，其中 AngularJS 需要在某些上下文中进行绑定以产生一个标记为可安全用于该上下文的值。禁用 SCE 后，AngularJS 应用程序允许将任意 HTML 渲染到 <div>，并且渲染用户控制的输入会产生安全漏洞。

Answer 3

我相信您真正想要的是让 TinyMCE 指令计算可见字符的“长度”，而不是计算 <textarea> 中的字符。 TinyMCE 将在页面中注入自己的 iFrame，编辑器是该 iFrame 的一部分——它不是<textarea>。

当您对<textarea> 进行验证时，您是在要求Angular 计算<textarea> 中的字符...这对您来说将是一个问题。问题是标准指令只计算字符，因此是一个简单的（空）HTML 示例：

<p></p>

当实际上没有“可见”内容时，确实会被计为 7 个字符。我为另一个编辑器构建了一个自定义指令，最终我对 HTML 使用了 jQuery 的 .text() 函数。这将删除所有 HTML 标记，并提供编辑器中实际文本字符数的近似值。这是指令中的部分代码：

var jStrippedString = jQuery(modelValue).text().trim();
return (maxlength < 0) || ngModelCtrl.$isEmpty(jStrippedString) || (jStrippedString.length <= maxlength);

我相信您会想要创建一个自定义 Attribute 指令，该指令允许您为编辑器获取模型数据并自己执行此验证，而不是简单地计算 <textarea> 中的字符。