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不会设置Bogus标志，只需将其设置在您的控制器中即可。我在那里使用了三元运算符，因为我认为这是CRUD接口的一部分，您可能正在加载现有数据以及插入新数据。这是我使用的最快的解决方案，如果您只是想让它在数据空白（或新/插入）时单独保留

HTH！

angular-ui-tinymce，data-mce-bogus =＆＃34; 1＆＃34;在模型上

1 个答案: