Оберните WYSIWYG-редактор в директиву AngularJS с помощью двухсторонних привязок данных - PullRequest
Новая
       53

Оберните WYSIWYG-редактор в директиву AngularJS с помощью двухсторонних привязок данных

0 голосов
/ 08 октября 2019

Мы исследуем использование WYSIWYG (https://imperavi.com/article/) в нашем приложении, используя Angular.js. Я хотел бы обернуть редактор в директиву Angular.js, чтобы мы могли иметь двустороннюю привязку данных, используяng-model.

У меня есть директива, отображающая редактор и применяющая модель, но когда я изменяю текст, она обновляет модель, которая, в свою очередь, немедленно снова запускает функцию $ watch и заставляет редакторпотерять фокус. Не думаю, что я делаю это правильно, поэтому я хотел бы получить совет от кого-то, имеющего опыт включения JS-плагина в директиву AngularJS.

HTML 

<article-editor ng-model="article.text"></article-editor>

Директива 

function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<textarea class="article-editor"></textarea>',
        scope: {
            'model':'=ngModel'
        },
        link: function(scope, elem, attrs) {
            var app = ArticleEditor(elem, {
                subscribe: {
                    'editor.content.change': function() {
                        var editor = this.editor;
                        console.log(this);
                        scope.$apply(function() {
                            scope.model = editor.content.get();
                        });
                    }
                }
            });
            scope.$watch('model', function(article) {
                app.editor.content.set(article);
            });

        }
    }
}

Ожидаемый результат: при обновлении модели обновляется редактор. При внесении изменений в редакторе обновляется модель. Все без потери фокуса при внесении изменений в редакторе.

...