Tinymce textarea 不适用于 AngularJS答案

【问题标题】：Tinymce textarea not working with AngularJSTinymce textarea 不适用于 AngularJS
【发布时间】：2014-05-22 10:22:40
【问题描述】：

当我使用文本框而不是 TinyMce 文本区域时，我的代码可以正常工作。在我的代码中使用 TinyMce 后，在文本区域输入的数据不再进入我的模型。

<script>
        tinymce.init({
            selector: 'textarea',
            width: 900,
            height: 200,
            toolbar1: "undo redo | styleselect | bold italic underline superscript     subscript | cut copy paste ",
            statusbar: false,
            menubar: false,
            plugins: "spellchecker",
            font_formats: "Andale Mono=andale mono,times;" +
       "Arial=arial,helvetica,sans-serif;" +
       "Arial Black=arial black,avant garde;" +
       "Courier New=courier new,courier;" +
       "Georgia=georgia,palatino;" +
       "Helvetica=helvetica;" +
       "Symbol=symbol;" +
       "Tahoma=tahoma,arial,helvetica,sans-serif;" +
       "Times New Roman=times new roman,times;" +
       "Verdana=verdana,geneva;",
            fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt"
        });

    </script>

我的 html 文件是：

<textarea id="QuestionText" ng-model="send.questiontext"></textarea>
{{send}}

为什么没有打印对象或者为什么数据不再绑定到我的模型。 ?

【问题讨论】：

标签： angularjs data-binding tinymce textarea

【解决方案1】：

您现在对 Angular 的期望相当于编写一些 jquery 来与 Angular 一起操作 DOM。这种方法是反对角度做事的。

我建议你开始使用angular implementation of tinyMCE

也花点时间阅读这篇fantastic post about thinking in Angular

【讨论】：

这不是 tinyMCE 的 angular 实现，而是对 tinyMCE.js 的简单绑定。

【解决方案2】：

TinyMCE 保持自己的缓冲区可通过tinymce.activeeditor.[get|set]content() 访问。

可以在此处找到与 ng-model 快速绑定的指令：codepen : angular directive for tinyMCE ，与 angular-ui-tinymce 的代码相同。快速打字员有时会发现它太慢了几微秒。

还有其他解决方案可以将富文本编辑器集成到 Angular 应用程序中：

scribe + angular exemple（演示显示复制/粘贴和段落有问题）
quill with angular（咖啡脚本示例）

【讨论】：