2

我正在将 CKEditor 与 angularJS 一起使用。我有两个编辑器窗口，如下所示：

    {{ modal.data.text }}
    <textarea
         id="Textarea1"
         data-ck-editor
         data-ng-disabled="modal.action=='delete'"
         data-ng-model="modal.data.text"></textarea>
    {{ modal.data.notes }}
    <textarea
        id="Textarea2"
        data-ck-editor
        data-ng-disabled="modal.action=='delete'"
        data-ng-model="modal.data.notes"></textarea>

该应用程序允许用户选择网格中的行，然后执行以下操作以在模态对象中填充新数据。请注意，编辑器实例是在启动时创建的，而不是每次选择新行时创建的。

$scope.modal.data = row;

我正在使用以下指令：

  app.directive('ckEditor',
        [ function() {
            return {
                require : '?ngModel',
                link : function($scope, elm, attr, ngModel) {

                    var ck = CKEDITOR.replace(elm[0]);

                    ck.on('instanceReady', function() {
                        ck.setData(ngModel.$viewValue);
                    });

                    ck.on('pasteState', function() {
                        $scope.$apply(function() {
                            ngModel.$setViewValue(ck.getData());
                        });
                    });

                    ngModel.$render = function(value) {
                        ck.setData(ngModel.$modelValue);
                    };
                }
            };
        } ])

当用户选择一行然后选择一个选项卡时，数据“有时”会出现，但通常不会出现。

在测试这个时，我注意到注释掉函数：ck.on('pasteState', function() 似乎有帮助，但是当我将数据输入 CDEditor 模型 {{ }} don' 时，我也遇到了更多问题t 显示正在更新的数据。

有人可以通过给我一些关于我能做什么的建议来帮助我。{{ modal.data.text }} 和 {{ modal.data.notes }} 被渲染，但 CKEditor 窗口通常显示其中没有数据。还有什么是'pasteState'的功能以及当我在CKEditor窗口中击键时AngularJS模型如何更新？最后一个问题。这甚至可以与多个编辑器窗口一起使用。是否会创建两个编辑器实例？

4

1 回答 1

6

即时创建多个编辑器：http: //jsfiddle.net/TheSharpieOne/cPTr7/

从多个编辑器开始并动态更改值：http: //jsfiddle.net/TheSharpieOne/tBrKQ/1/

击键更新：http: //jsfiddle.net/TheSharpieOne/fMC2p/（注意：在纯文本区域内编辑时，ckEditor 将解析文本并再次更新，将其包装在 HTML 中）

都有相同的指令：

app.directive('ckEditor', [function () {
    return {
        require: '?ngModel',
        link: function ($scope, elm, attr, ngModel) {

            var ck = CKEDITOR.replace(elm[0]);

            ck.on('pasteState', function () {
                $scope.$apply(function () {
                    ngModel.$setViewValue(ck.getData());
                });
            });

            ngModel.$render = function (value) {
                ck.setData(ngModel.$modelValue);
            };
        }
    };
}])
于 2013-09-11T13:47:18.913 回答