0

他在那里，

最近我一直在尝试使用 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 -->

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

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

4

1 回答 1

2

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

只需加载 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]);
            });
        }
    }
});

支持多个实例

于 2013-05-20T14:04:59.693 回答