在 AngularJS 的模板中使用 CKeditor

Question

我在使用 CKeditor 时遇到问题。

首先我有这个：

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

没问题，我有一个带有 ckeditor 按钮样式（粗体、下划线...）的文本区域。

但我在模板中有相同的 texterea :

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

我有一个简单的文本区域...你知道这个问题吗？

Answer 1

您应该为此使用指令，因为 angular 在加载文档时创建 ckeditor（可能由 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>

在 AngularJS 的模板中使用 CKeditor

Use CKeditor in template with AngularJS

ckeditor

angularjs

angularjs-ng-template