Angularjs多个ckEditor具有相同的ngModel答案

【问题标题】：Angularjs multiple ckEditors have same ngModelAngularjs多个ckEditor具有相同的ngModel
【发布时间】：2017-07-18 14:39:52
【问题描述】：

我有带有 wiris 插件的 ckeditor，并且我在 ng-repeate 中有 ck-editors 实例，当用户在 ck-editor 的任何实例上发布任何 wiris 问题时，该帖子将发布到 ck-editor.I 的第一个实例如果 ng-repeat 中有 3 个 ck-editor 实例，用户使用 wiris 方程发布 ck-editor 的第二个实例，那么该帖子应该只显示在 ck-editor 的第二个实例，目前它只显示在第一个实例。 我的html：

       <div ng-repeat="item in items"> 
<form role="form" name="DiscussionForm" novalidate>
            <input type="text" name="followup" ng-model="followupDis"  
    ck-editor placeholder="Compose" required>
            <div><button type="submit"ng-click="start()">Post</button>
            </div>
       </form>
</div>

在js中

    app.directive('ckEditor', function() {
        return {
            require: '?ngModel',
            link: function(scope, elm, attr, ngModel) {
                var ck = CKEDITOR.replace(elm[0]);

                if (!ngModel) return;

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

                function updateModel() {
                    scope.$apply(function() {
                        ngModel.$setViewValue(ck.getData());
                    }); 
                }

                ck.on('change', updateModel);
                ck.on('focus', updateModel);
                ck.on('key', updateModel);
                ck.on('dataReady', updateModel);

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

我期望在指令中我已经为第一个元素 var ck = CKEDITOR.replace(elm[0]); 创建了实例，所以它应该改变。所以任何人都可以用 wiris 共享 ckeditor 的多个实例的解决方案。

【问题讨论】：

标签： angularjs angularjs-directive ckeditor angularjs-ng-model wiris

【解决方案1】：

我发现通过改变属性的id我们可以解决这个问题。

在js中：

app.directive('ckEditor', function() {
        var counter = 0, prefix = "followupDiscussionPostReply-";
        return {
            require: '?ngModel',
            link: function(scope, elm, attr, ngModel) {

                if (!attr.id) {
                    attr.$set('id', prefix + (++counter));
                }
               // rest of the code

这些更改修复了多个 ckeditor 对我来说具有相同的 ngModel 问题。

【讨论】：