Как я могу использовать привязку данных AngularJS с CKEditor?

Question

Как мне это сделать?

Я смог получить данные в CKEditor, используя textarea с атрибутом name, соответствующим моей модели, и тег script с ng:bind-template для вызова CKEDITOR.replace.

Затем я создал плагин CKEditor, который обнаруживает изменения и записывает их обратно в textarea.Проблема заключается в том, что textarea теряет свои обработчики событий, когда CKEditor инициализируется, а CKEditor не принимает изменения в textarea.Это заставляет меня думать, что я подхожу к этому неправильно.

Затем я попытался использовать ng:eval-order="LAST" ng:eval="setupCKEditor()" и настроить редактор из функции setupCKEditor().Это не сработало, потому что даже с ng:eval-order="LAST" функция все еще выполняется до создания узлов.

Я обнаружил, что добавление setTimeout(function () {...},0) вокруг CKEDITOR.replace помогает.Теперь единственная проблема заключается в том, что при изменении модели он не перерисовывает экран до тех пор, пока не будет отредактировано другое поле.

scope.$root.$eval();, кажется, исправляет это.

Обновление

В итоге мы отказались от этого, так как никогда не могли заставить его работать надежно.Мы переключились на TinyMCE с Angular-UI на некоторое время, а затем закончили сборкой чего-то особенного.

Answer 1

Для полноты приложен модуль, обеспечивающий угловую директиву . Я еще не использовал его, поэтому не могу комментировать, насколько хорошо он работает / интегрируется.

Answer 2

Этот тип работает с плагином onchange из http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html.

angular.directive("my:ckeditor", function (expression, compiledElement) {
    return function fn(element) {
        var scope = this;

        setTimeout(function () {
            CKEDITOR.replace("editor-" + index, {extraPlugins: 'onchange'});

            scope.$watch("layers[" + index + "].src", function () {
                if (!CKEDITOR.instances["editor-" + index]) return;
                if (scope[expression] == CKEDITOR.instances["editor-" + index].getData()) return;
                CKEDITOR.instances["editor-" + index].setData(scope[expression]);
            });

            CKEDITOR.instances["editor-" + index].on("change", function () {
                scope[expression] = CKEDITOR.instances["editor-" + index].getData();
                scope.$root.$eval();
            });
        }, 0);
    };
});

Обновление

Это было проверено только на v0.10.6