Используйте CKeditor в шаблоне с AngularJS

Question

У меня проблема с использованием CKeditor.

Сначала в топе у меня это:

<textarea class="ckeditor" id="test"></textarea>

Нет проблем, у меня есть текстовое поле со стилем кнопок (жирным шрифтом, подчеркиванием,...) ckeditor.

Но у меня есть тот же текст в шаблоне:

<script type="text/ng-template".....
.....
<textarea class="ckeditor" id="test"></textarea>
.....
.....</script>

И у меня есть простая текстовая область... Вы знаете эту проблему?

Answer 1

Для этого вы должны использовать директивы, потому что угловые загрузки в шаблонах асинхронны, когда ckeditors создаются (вероятно, jquery), когда документ загружается.

Либо используйте существующую библиотеку, например https://github.com/lemonde/angular-ckeditor, либо создайте простую директиву самостоятельно:

angular.module("myApp", [])
    .directive("ckeditor", [function(){
        return {
            restrict: "A",
            link: function (scope, elem, attrs) {
                CKEDITOR.replace(elem[0], {
                    // configuration
                });
            }
        }
    }]);

HTML:

<textarea ckeditor></textarea>