Question

我应该怎么做？

我能够使用textarea name属性与我的模型匹配，script标记与ng:bind-template调用{{1}，将数据导入CKEditor }}

然后我创建了一个CKEditor插件来检测更改并将它们写回CKEDITOR.replace。问题是当CKEditor初始化并且CKEditor没有对textarea进行更改时，textarea会丢失其事件处理程序。这让我觉得我接近这个错误的方式。

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

我发现在ng:eval-order="LAST"附近添加setTimeout(function () {...},0)会有所帮助。现在唯一的问题是，当它改变模型时，它不会重新绘制屏幕，直到编辑了另一个字段。

CKEDITOR.replace似乎解决了这个问题。

更新

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

Answer 1

这种方法适用于http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html的onchange插件。

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

为了完整性，附件是一个提供angular directive的模块。我还没有使用它，所以我无法评论它的工作/整合程度。

如何在CKEditor中使用AngularJS数据绑定？

2 个答案: