使用 Tinymce (ui-tinymce) 时使用 Angular ng-messages 验证 textarea答案

【问题标题】：Validate textarea with Angular ng-messages when using Tinymce (ui-tinymce)使用 Tinymce (ui-tinymce) 时使用 Angular ng-messages 验证 textarea
【发布时间】：2015-12-10 13:28:24
【问题描述】：

当<textarea> 具有ui-tinymce 属性时，如何使用ng-messages 验证ng-maxlength？

或者有没有更好的方法？

<div class="form-group">
    <div class="col-sm-12">
        <label>Description</label>
        <p class="small">Please provide as much detailed information as possible.</p>
        <textarea name="description" class="form-control required" ui-tinymce="tinymceOptions" ng-model="aC.testData.description"
                  ng-maxlength="100" required></textarea>
        <div class="help-block" ng-messages="mainForm.description.$error" ng-show="mainForm.description.$touched">
            <p ng-message="required">A description is required.</p>
            <p ng-message="maxlength">Description must not exceed 100 characters.</p>
        </div>
    </div>
</div>

【问题讨论】：

标签： angularjs tinymce textarea ng-messages

【解决方案1】：

您看到的问题是标准指令只计算字符，因此是一个简单的（空）HTML 示例：

<p></p>

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

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

我相信您会想要创建一个自定义 Attribute 指令，允许您为编辑器获取模型数据并自己执行此验证。

【讨论】：

【解决方案2】：

将forced_root_block: "" 添加到 tinymce 选项也应该可以工作。默认情况下它不会从一开始就添加<p></p>。

【讨论】：