如何使用 AngularJS 和 CKEditor 在控制器范围内添加 CKEditor 实例答案

【问题标题】：How to add CKEditor instances inside Controller scopes with AngularJS and CKEditor如何使用 AngularJS 和 CKEditor 在控制器范围内添加 CKEditor 实例
【发布时间】：2013-09-06 05:30:23
【问题描述】：

他在那里，

最近我一直在尝试使用 Angular JS。一切顺利，我的控制器、服务等。

当我尝试使 ng-controller 内的 Div 可编辑时，不会弹出 ckeditor 工具栏。控制器之外的任何其他 div 都可以正常工作。

HTML：

<!-- BEGIN Dynamic Content with AngularJS -->
    <div id="js_enabled" class="js_enabled" ng-controller="boxes_controller">
        <div class="box" ng-repeat="box in boxes" style="min-width: {[{ boxes_width }]}%; width:  {[{ boxes_width }]}%; max-width: {[{ boxes_width }]}%;">
            <p contenteditable="true"> asd</p>
            <div class='box-content'>
                    <p>
                    <b>{[{ box.title }]}</b><br/>
                    {[{ box.description }]}
                    </p>
            </div>
        </div>
    </div>
<!-- END Dynamic Content with AngularJS -->

{[{}]} 是插值覆盖。如果您可以看到有一个 small 'p' 元素，其 contenteditable 仅用于测试。那是不显示ckeditor栏的元素。我测试它不是CSS。 ckeditor 的工具栏 DIV 元素甚至没有被创建并且不存在错误。

PS。如果我在控制器范围之外使任何其他元素可编辑，则一切正常。

【问题讨论】：

CKEditor 是否调用动态创建的内容。我认为不是。可以在自定义指令的链接函数中完成。
是的，我已经解决了。你是对的，这是我的错误@lib3d

标签： javascript html angularjs ckeditor

【解决方案1】：

使它成为一个简单的指令。

只需加载ckeditor.js，代码为：

mainApp.directive('ckEditor', function() {
    return {
        restrict: 'A', // only activate on element attribute
        scope: false,
        require: 'ngModel',
        controller: function($scope, $element, $attrs) {}, //open for now
        link: function($scope, element, attr, ngModel, ngModelCtrl) {
            if(!ngModel) return; // do nothing if no ng-model you might want to remove this
            element.bind('click', function(){
                for(name in CKEDITOR.instances)
                    CKEDITOR.instances[name].destroy();
                CKEDITOR.replace(element[0]);
            });
        }
    }
});

支持多个实例

【讨论】：