CODEWITHSUNDEEP
angularjsangularjs-directiveckeditorckeditor5
aniogs
aniogs

Reputation: 15

Angular directive for CKEditor 5 not working

I am trying to create a directive for CkEditor5, but it not change model value.

This is my code for directive:

      .directive('ckEditor', function () {       
       return {
         require: '?ngModel',
         link: function (scope, element, attr, ngModel) {
             if (!ngModel) return;

             ClassicEditor.create(element[0]).then((editor) => {

                editor.on('change', () => {
                    scope.$apply(() => {
                        ngModel.$setViewValue(editor.getData());
                    });
                });
                ngModel.$render = () => {
                    editor.setData(ngModel.$modelValue);
                };
                scope.$on('$destroy', () => {
                    editor.destroy();
                });
            });
        }
    }
})

The 'change' event doesn't do anything. Can anyone explain what is not correct here?

Upvotes: 1

Views: 1812

Answers (1)

miqh
miqh

Reputation: 3664

You're not correctly binding to the underlying data change event for CKEditor.

Specifically,

editor.model.document('change:data', () => { /* ... */ });

Here's a working demonstration.

Upvotes: 2

Related Questions