如何使用 ng-repeat 获取 ckeditor 的实例？

Question

我正在尝试将 ckeditor 与 angularjs 一起使用，我已经为此添加了一个指令。它工作正常。问题是当我尝试获取 ckeditor 的实例列表时。

// 指令

app.directive('ckeditor', function () {
     return {
        require: '?ngModel',
        link: function (scope, element, attr, ngModel) {
            var ck = CKEDITOR.replace(element[0]);
            if(!ngModel)return;
            ck.on('pasteState', function () {
                scope.$apply(function () {
                    ngModel.$setViewValue(ck.getData());
                });
            });
            ngModel.$render = function (value) {
                ck.setData(ngModel.$viewValue);
            };
        }
    };
});

// ng-重复

<div ng-repeat="key in []| range:0:(vm.listCount-1)"> 
     <textarea ckeditor id="content_{{key + 1}}"
               ng-model="vm.contentList[key].content">
     </textarea>
</div>

在控制器中，我正在尝试获取实例列表。那里而不是 content_0,content_1 等。我只得到 content_{{key + 1}} 一个实例

console.log(CKEDITOR.instances);

我想获得 ckeditor 的正确实例，但我只获得一个值，即 content_{{key + 1}} 请有人建议。

Answer 1

我的猜测是该指令需要在调用 CKEDITOR.replace 之前设置 id 属性：

app.directive('ckeditor', function () {
     return {
        require: '?ngModel',
        link: function (scope, element, attr, ngModel) {
            //COMPUTE id attribute
            if (attr.key) {
                var keyValue = scope.$eval(attr.key);
                element[0].id += "_"+keyValue;
            };
            var ck = CKEDITOR.replace(element[0]);
            if(!ngModel)return;
            ck.on('pasteState', function () {
                scope.$apply(function () {
                    ngModel.$setViewValue(ck.getData());
                });
            });
            ngModel.$render = function (value) {
                ck.setData(ngModel.$viewValue);
            };
        }
    };
});

用法：

<div ng-repeat="key in [0,1]"> 
     <textarea ckeditor key="$index+1" id="content"
               ng-model="vm.contentList[key].content">
     </textarea>
</div>

CKEDITOR 可能在 AngularJS 框架计算 id="content_{{key + 1}}" 之前实例化编辑器。

如何使用 ng-repeat 获取 ckeditor 的实例？

How to get instances of ckeditor with ng-repeat?

angularjs

angularjs-directive

angularjs-ng-repeat

ckeditor4.x