如何将 AngularJS 数据绑定与 CKEditor 结合使用？

Question

我该怎么办？

我能够通过使用 textarea 以及与我的模型匹配的 name 属性和带有 ng 的 script 标签将数据导入 CKEditor :bind-template 调用CKEDITOR.replace。

然后我制作了一个 CKEditor 插件来检测更改并将其写回 textarea。问题在于，当 CKEditor 初始化并且 CKEditor 不拾取对 textarea 的更改时，textarea 会丢失其事件处理程序。这让我觉得我处理这个问题的方式是错误的。

接下来，我尝试使用 ng:eval-order="LAST" ng:eval="setupCKEditor()" 并通过 setupCKEditor() 函数设置编辑器。这不起作用，因为即使使用 ng:eval-order="LAST" 该函数仍然在创建节点之前运行。

我发现在 CKEDITOR.replace 周围添加 setTimeout(function () {...},0) 会有所帮助。现在唯一的问题是，当它更改模型时，它不会重新绘制屏幕，​​直到编辑另一个字段。

scope.$root.$eval(); 似乎解决了这个问题。

更新

我们最终放弃了这个，因为我们永远无法让它可靠地工作。我们切换到TinyMCE with Angular-UI一段时间，然后最终构建了一些自定义的东西。

Answer 1

这种方式与 onchange 插件配合使用>http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html。

angular.directive("my:ckeditor", function (expression, compiledElement) {
    return function fn(element) {
        var scope = this;

        setTimeout(function () {
            CKEDITOR.replace("editor-" + index, {extraPlugins: 'onchange'});

            scope.$watch("layers[" + index + "].src", function () {
                if (!CKEDITOR.instances["editor-" + index]) return;
                if (scope[expression] == CKEDITOR.instances["editor-" + index].getData()) return;
                CKEDITOR.instances["editor-" + index].setData(scope[expression]);
            });

            CKEDITOR.instances["editor-" + index].on("change", function () {
                scope[expression] = CKEDITOR.instances["editor-" + index].getData();
                scope.$root.$eval();
            });
        }, 0);
    };
});

更新

仅在 v0.10.6 上测试过

Answer 2

为了完整起见，附加了一个提供角度指令的模块。我还没有使用过它，所以我无法评论它的工作/集成程度。