angular-ui-tinymce，data-mce-bogus="1“on model

Question

我在ui-tinymce中遇到了一个奇怪的行为，非常感谢你的帮助。

我实现了ui-tinymce，编辑器工作得很好，除了如果编辑器中没有插入任何值，tinymce的默认元素会出现在模式上。

$rootScope.tinymceConfig  = {
    inline: false,
    resize: false,
    valid_elements : "a[href|target=_blank],strong/b,div[align|dir],br,ul,ol,li,hr,p[dir],span[dir]",
    toolbar: "bold italic underline | link image | bullist numlist | alignleft aligncenter alignright | ltr rtl | removeformat code",
    plugins: "autolink link image directionality paste code",
    paste_as_text: true,
    paste_auto_cleanup_on_paste: true,
    paste_remove_spans: true,
    paste_remove_styles: true,
    paste_retain_style_properties: false,
    skin: 'lightgray',
    menubar: false
  };

<textarea rows="10" class="form-control"
                              ui-tinymce="tinymceConfig"
                              ng-model="someModal"></textarea>

模型值(当编辑器为空时)设置为：

<p><br data-mce-bogus="1"></p>

如果我理解正确的话，这个代码块是由tinymce推送的根元素，以防编辑器为空，以便在编辑器上启用鼠标单击。它不应该出现在模型中。

Answer 1

当分配给元素的模型值不是有效的HTML、null或空字符串时，就会发生这种情况。这非常烦人，即使经常设置它，TinyMCE仍然会将$form设置为$dirty，但这完全是另一回事。

要修复此问题，请尝试将模型值(示例中的someModal)初始化为空段落：

$scope.someModal = $scope.someModal ? $scope.someModal : "<p></p>";

这是有效HTML，TinyMCE不会设置伪标志，只需在控制器中设置它即可。我在那里使用了三元运算符，因为我假设这是CRUD接口的一部分，您可能既要加载现有数据，也要插入新数据。这是我用过的最快的修复方法，如果你只是想让它在你的数据为空(或新的/插入)时不去管它。

哈！