Angular UI Tinymce删除ng-model中的内容，当不使用`<textarea>`</textarea>时，双向绑定不起作用

Question

我在使用TinyMCE编辑器和Angular UI的轻量包装器时遇到的一个问题是，在编辑器中进行更改时，ng-model似乎没有进行我期望的范围内模型数据的双向绑定。只有在使用<div>或<p>时才会出现此问题。

当我使用<textarea>时，双向绑定似乎工作得很好，但这不是我想要的......我想要一个内联编辑器。

以下是我的选择：

$scope.tinymceOptions = {
    inline: true,
    menubar: false,
    statusbar: false,
    toolbar: "bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link | removeformat"
};

在我的情况下，如果pageElement.text中有内容，它实际上会被放入TinyMCE编辑器中。 但是，一旦TinyMCE执行此操作，文本将完全从pageElement.text中删除，并且不再尊重ng-model与pageElement.text绑定的约束：< / p>

<div class="pageParagraph">
    <div class="contenteditable"
         ui-tinymce="tinymceOptions"
         ng-model="pageElement.text"></div>
    <p>{{pageElement}}</p>
</div>

以下是截图：

当TinyMCE处于串联模式时，如何才能进行双向绑定？

Answer 1

经过一个小时左右的扫描后，我发现从Angular UI扩展中更改tinymce.js中的updateView可以解决问题：

      updateView = function () {
        if(elm.prop("tagName").toLowerCase() === 'textarea') {
            ngModel.$setViewValue(elm.val());
        } else {
            ngModel.$setViewValue(elm.html());
        }

        if (!scope.$$phase) {
          scope.$apply();
        }
      };

它可能并不完美，但它适用于p，div和textarea。此解决方案还避免了看起来很奇怪的非显而易见的代码。

Answer 2

您应该将$watch设置为内联编辑器，如果已更改，请将内容设置为TinyMCE编辑器，如下所示：

tinymce.get('my-tinymce-id').setContent($scope.inlineEditorContent);

Answer 3

这种方法怎么样：

http://plnkr.co/edit/iMa0WxWkO4OVBZC86u8W?p=preview

我在那里使用了<div>和<p>。