Angularjs multiple ckEditors have same ngModel

300 views Asked by At

I have ckeditor with wiris plug in ,and I have ck-editors instances in ng-repeate ,when user posts any wiris question at any instance of ck-editor ,that post is posted to fist instance of ck-editor.I want if 3 instances of ck-editors in ng-repeat,users post 2nd instance of ck-editor with wiris equation then that post should show at only 2nd instance of ck-editor only ,Presently it shows at only 1st instance . My 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>

in 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);
                };
            }
        };
    }); 

I am expecting in directive I have create the instance for the first element var ck = CKEDITOR.replace(elm[0]); so it should change. So any one can share the solution for multiple instances of ckeditor with wiris .

1

There are 1 answers

0
Shekkar On

I have found by changing the id of the attribute we can solve this one .

in 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 

these changes fixed the multiple ckeditors have same ngModel issue for me .