javascript - 如何使用 AngularJS 和 CKEditor 在 Controller 范围内添加 CKEditor 实例

Question

他就在那里，

最近我一直在尝试 Angular JS。一切都很顺利，我的 Controller 、服务等。

当我尝试使 ng-controller 内的 Div 可编辑时，ckeditor 工具栏不会弹出。 Controller 之外的任何其他 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 -->

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

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

Answer 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]);
            });
        }
    }
});

支持多个实例