angularjs - 使用 AngularJS 在一页上使用多个 4.2 CKEditor 实例

Question

我正在将 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 模型 {{ } } 不显示正在更新的数据。

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

Answer 1

动态创建多个编辑器: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);
            };
        }
    };
}])