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

Question

当 <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>

Answer 1

您看到的问题是标准指令只对字符进行计数，如此简单（空）HTML 示例：

<p></p>

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

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

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

Answer 2

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

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

Validate textarea with Angular ng-messages when using Tinymce (ui-tinymce)

textarea

tinymce

angularjs

ng-messages