CKEditor Uncaught TypeError:无法在具有多个编辑器的EmberJS单页面应用程序中调用null的方法'unselectable'

Question

我有一个使用EmberJS创建的单页应用程序.

我在页面上有3个textareas.

一旦textarea被插入到dom中,我正在渲染ckeditor,并且我在控制器上标记了一个属性,记录了ckeditor已被渲染,因此我不会渲染多次.

我甚至在调查dom以确认当前没有编辑器.

刷新页面时,我随机收到此错误:

Uncaught TypeError: Cannot call method 'unselectable' of null

我不知道是什么导致它或现在阻止它.当它没有抛出该错误时,所有3个ckeditor看起来都很好.

这是我的编辑器的启动代码:

Lrt.PrioritizationEditableTextArea = Ember.TextArea.extend({
    areaVisible: false,
    isRendered: false,
    isInserted: false,

   didInsertElement:function(){
       this.set('isInserted', true);
   },

   renderEditor:function(){
       var self = this;
       var selfID = self.get('elementId');

        if( !this.get('isRendered') && this.get('isInserted') && $('#'+selfID).parent().find('cke').length === 0 ){

            var editor = $('#'+selfID).ckeditor({
               toolbar:[
                   { name: 'document', items:['Source'] },
                   { name: 'clipboard', items:['Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']},
                   { name: 'editing', items:['scayt']},
                   { name: 'basicstyles', items:['Bold', 'Italic', 'Underline', 'TextColor', 'BGColor', '-', 'RemoveFormat']},
                   { name: 'styles', items:['FontSize']},
                   { name: 'paragraph', items:['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-']}
               ]
            }).editor;

            editor.on('change', function(e){
               if(e.editor.checkDirty()){
                   self.set('value', editor.getData());
               }
            });

            this.set('isRendered', true);
        }

   }.observes('areaVisible')
});

我也在使用ckeditor的"onChange"插件在编辑器中发生任何变化并响应它时触发"onChange"事件.

我尝试过的:

• 删除onChange插件
• 将ckeditor更改为4.3 beta版
• 删除工具栏自定义项
• 删除onChange事件侦听器
• 验证渲染时所有textareas都包含内容

我需要做些什么来解决这个问题？

编辑

这是堆栈跟踪:(我正在修复我的应用程序中的ver字符串)

a (ckeditor.js?ver=2.0.0:291)
(anonymous function) (ckeditor.js?ver=2.0.0:287)
i (ckeditor.js?ver=2.0.0:10)
CKEDITOR.event.CKEDITOR.event.fire (ckeditor.js?ver=2.0.0:12)
CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js?ver=2.0.0:13)
CKEDITOR.event.CKEDITOR.event.fireOnce (ckeditor.js?ver=2.0.0:12)
CKEDITOR.editor.CKEDITOR.editor.fireOnce (ckeditor.js?ver=2.0.0:13)
(anonymous function) (ckeditor.js?ver=2.0.0:223)
m (ckeditor.js?ver=2.0.0:203)
CKEDITOR.scriptLoader.load (ckeditor.js?ver=2.0.0:203)
(anonymous function) (ckeditor.js?ver=2.0.0:222)
(anonymous function) (ckeditor.js?ver=2.0.0:210)
(anonymous function) (ckeditor.js?ver=2.0.0:208)
m (ckeditor.js?ver=2.0.0:203)
CKEDITOR.scriptLoader.load (ckeditor.js?ver=2.0.0:203)
CKEDITOR.resourceManager.load (ckeditor.js?ver=2.0.0:207)
h (ckeditor.js?ver=2.0.0:209)
(anonymous function) (ckeditor.js?ver=2.0.0:210)
m (ckeditor.js?ver=2.0.0:220)
(anonymous function) (ckeditor.js?ver=2.0.0:220)
(anonymous function) (ckeditor.js?ver=2.0.0:397)
(anonymous function) (ckeditor.js?ver=2.0.0:208)
m (ckeditor.js?ver=2.0.0:203)
q (ckeditor.js?ver=2.0.0:203)
r (ckeditor.js?ver=2.0.0:203)
(anonymous function) (ckeditor.js?ver=2.0.0:204)

编辑#2:

以下是应用程序特定区域的问题:http: //jsfiddle.net/sSaCd/3/

Answer 1

我在页面上使用AngularJS和jQuery UI Sortable与多个CKEditor有类似的问题.基本上是一个噩梦设置.不确定这是否完全相关,但我想我无论如何都要分享以防其他人遇到这个问题.它似乎是CKEditor(http://dev.ckeditor.com/ticket/11924？)中的一个错误.

每当DOM被sortable改变时,我都会有回调来破坏/重新创建CKE(长篇故事).

我在打电话CKEDITOR.remove(ckInstance),导致你得到同样的错误.

我也尝试在回调中调用调用ckInstance.destroy()和ckInstance.destroy(true)(以避免更新已经更改的DOM),但是得到了错误Cannot read property 'hasAttribute' of undefined(并且还在Cannot read property 'clearCustomData' of null某处).

我能够通过以下方式解决此问题:

ckInstance.removeAllListeners(); CKEDITOR.remove(ckInstance);

CKEditor似乎做了很糟糕的清理工作,处理DOM变化非常糟糕(更不用说Angular ......)

希望这可以节省别人花费大量时间来弄明白:)

Answer 2

我使用Meteor并且有多个ckeditor实例也有同样的问题.这是反应式DOM加载的常见问题,其中您的应用程序按照收到的顺序处理了您的javaScript调用,但DOM可能未完全加载.

为了解决这个问题,我只使用setTimeout来阻止代码.

setTimeout(function(){
    $('#content-area').ckeditor();
},100);

Answer 3

尝试调用您的编辑器实例在ck_editor.destroy哪里ck_editor。由于某种原因，CKEDITOR 似乎保留了旧实例。如果你销毁它们，错误似乎就会消失。

MyView: Ember.View.extend
   # Hang on to the reference for your editor
   didInsertElement: ->
       @set('ck_editor', CKEDITOR.replace('whatever'))

   # Tear down your instanc
   willDestroyElement: ->
       if @get('ck_editor')
           @get('ck_editor').destroy()