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

Posted 2021-04-09

我正在尝试使用带有angularjs的ckeditor我已添加了相同的指令。它工作正常。问题是当我尝试获取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-repeat

<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等。我只获得内容_ {{key + 1}}一个实例

console.log(CKEDITOR.instances);

我想获得ckeditor的正确实例，但我只得到一个内容为_ {{key + 1}}的值。请有人建议。

答案

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

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>

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