Question

我正在使用带角度J的CKEditor。我有两个编辑窗口如下：

    {{ 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);
            };
        }
    };
}])

使用AngularJS在一个页面上有多个4.2 CKEditor实例

1 个答案: