AngularJS + TinyMCE:ng-maxlength无效<textarea>

时间:2016-01-14 15:33:13

标签: angularjs tinymce textarea ng-maxlength angular-ui-tinymce

&lt; p&gt;我想限制最大文本长度,因此它不会超过DB中的列长度。我已将此限制放在后端,现在我想在前端强制实施。&lt; / p&gt; &lt; p&gt;我使用&lt; a href =&#34; https://www.tinymce.com/" rel =&#34; nofollow noreferrer&#34;&gt; TinyMCE&lt; / a&gt; v4.3.3 with&lt; a href =&#34; https://github.com/angular-ui/ui-tinymce" rel =&#34; nofollow noreferrer&#34;&gt; angular-ui-tinymce&lt; / a&gt; v0.0.12插件和&lt; a href =&#34; https://angularjs.org/" rel =&#34; nofollow noreferrer&#34;&gt; AngularJS&lt; / a&gt; 。v1.4.6&LT; / p为H. &LT; p为H. JS:其中/ p为H. &lt; pre&gt;&lt; code&gt; var tinymceOpts = {     工具栏:false,     菜单栏:假,     //不要添加&lt; p&gt;&lt; / p&gt;从头开始:     forced_root_block:&#39;&#39; } &LT; /代码&GT;&LT; /预&GT; &LT; p为H. HTML:其中/ p为H. &lt; pre&gt;&lt; code&gt;&lt; textarea ui-tinymce =&#34; tinymceOpts&#34;           NG-模型=&#34;主体&#34;           名称=&#34;主体&#34;           NG-MAXLENGTH =&#34; 100&#34;           所需&GT;     {{ 身体 }} &LT; / textarea的&GT; &lt; span ng-show =&#34; form.body。$ error.maxlength&#34;类=&#34;错误&#34;&GT;     达到极限! &LT; /跨度&GT; &LT; /代码&GT;&LT; /预&GT; &lt; p&gt;如您所见,我使用&lt; a href =&#34; https://docs.angularjs.org/api/ng/directive/textarea" rel =&#34; nofollow noreferrer&#34;&gt;&lt; code&gt; ng-maxlength&lt; / code&gt;&lt; / a&gt;此处的属性限制&lt; code&gt;&lt; textarea&gt;&lt; / code&gt;的长度。&lt; / p&gt; &lt; p&gt;&lt; strong&gt;预期结果:&lt; / strong&gt;只有当内容长度(包含标签)&lt; / strong&gt;时,才会验证输入并显示错误消息已超出限制(在这种情况下为100个字符)。&lt; / p&gt; &lt; p&gt;&lt; strong&gt;实际结果:&lt; / strong&gt;&lt; br&gt; &lt; a href =&#34; https://i.stack.imgur.com/qCTs2.png" rel =&#34; nofollow noreferrer&#34;&gt;&lt; img src =&#34; https://i.stack.imgur.com/qCTs2.png" ALT =&#34;屏幕截图&#34;&GT;&LT; / A&GT;&LT; / p为H. &lt; p&gt;当输入包含一些文本(无论长度是多少)时,表单输入状态被设置为无效。&lt; / p&gt; &LT; HR&GT; &lt; p&gt;计算用于测试的字符数(在右下角):&lt; / p&gt; &lt; pre&gt;&lt; code&gt; this.getCharCount = function(){     var tx = editor.getContent({format:&#39; raw&#39;});     return tx.length; }; &LT; /代码&GT;&LT; /预&GT;

3 个答案:

答案 0 :(得分:1)

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

为了达到你想要的效果,你需要检查编辑器内容本身,并且在达到maxlength时不允许输入更多字符。

答案 1 :(得分:0)

我设法让它发挥作用!有必要在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>,并且呈现用户控制的输入会产生安全漏洞。

答案 2 :(得分:0)

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

当您在<textarea>上进行验证时,您要求Angular计算<textarea>中的字符...这对您来说将是一个问题。问题是标准指令只计算字符,因此是一个简单的(空)HTML样本:

<p></p>

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

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

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