Angular UI Tinymce 从 ng-model 中删除内容，不使用 `<textarea>` 时 2 向绑定不起作用答案

【问题标题】：Angular UI Tinymce deletes content from ng-model and 2-way binding does not work when not using `<textarea>`Angular UI Tinymce 从 ng-model 中删除内容，不使用 `<textarea>` 时 2 向绑定不起作用
【发布时间】：2014-03-05 09:07:15
【问题描述】：

我在使用 TinyMCE 编辑器和 Angular UI 的轻包装器时遇到的一个问题是，当在编辑器中进行更改时，ng-model 似乎没有对范围内的模型数据进行 2 路绑定.这个问题似乎只在使用<div> 或<p> 时发生。

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

这是我的选择：

$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 中完全删除，并且它与 pageElement.text 的 ng-model 绑定将不再受到尊重：

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

截图如下：

当 TinyMCE 处于内联模式时，如何实现 2 路绑定？

【问题讨论】：

标签： javascript jquery angularjs tinymce angular-ui

【解决方案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。此解决方案还避免了看起来很奇怪的非显而易见的代码。

【讨论】：

【解决方案2】：

这种方法怎么样：

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

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

【讨论】：

Hrm，这确实解决了 TinyMCE -> Angular 问题，使用了一种有趣的方法。有没有办法设置它的初始内容？使用这种方法时，传递带有一些内容的模型似乎并没有真正改变编辑器。
我很好奇为什么他们让绑定只适用于 textarea 元素。也许我应该付出一些努力来改变 Angular 的 ui 代码以使其适用于一切。
绑定工作不仅适用于textarea，也适用于input 和select。对于其他标签，您还不能绑定模型。见此页面：stackoverflow.com/questions/17784266/… 这是带有初始内容的示例：plnkr.co/edit/emdvVl8vIlRSkbR4JQ08?p=preview
我想出了一个替代解决方案来修复 Angular UI 绑定代码本身。我认为他们修复项目以做类似的事情。
是的，你的方法更优雅！

【解决方案3】：

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

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

【讨论】：

我认为这不能解决我的问题。您在 plunker 示例中使用 <textarea>，这会导致人们期望的正确 2 路绑定，因此不需要与 tinymce 对象的额外交互。问题是当编辑器被用作带有<div> 或<p> 标记的内联时。范围内的内容不再被修改。事实上，它只是被完全删除。将您的 plunker 更改为 <div>，您会发现它不再有效。
另外，当您不使用<textarea> 时，手表将不再工作。