Javascript CKEditor Uncaught TypeError:无法调用方法'；不可选择'；具有多个编辑器的EmberJS单页应用程序中的空值

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

我在页面上有3个文本区域

将textarea插入dom后，我将呈现ckeditor，并且我将标记控制器上记录已呈现ckeditor的属性，以便我不会多次呈现它

我甚至正在查看dom，以验证当前没有编辑器

刷新页面时，我随机出现以下错误：

Uncaught TypeError: Cannot call method 'unselectable' of null

我不知道是什么原因造成的，也不知道现在该如何预防。当它没有抛出该错误时，所有3个编辑器看起来都很好

以下是我的编辑器初始化代码：

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测试版
• 删除工具栏自定义项
• 删除onChange事件侦听器
• 在渲染时验证所有文本区域中是否都包含内容

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

编辑

这是堆栈跟踪：（我正在应用程序中添加ver字符串）

编辑#2:

下面是出现问题的应用程序的特定区域：

---

尝试调用

ck\u编辑器。销毁
ck\u编辑器
是您的编辑器实例。出于某种原因，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()

我在AngularJS和jQuery UI Sortable上遇到了类似的问题，页面上有多个CKeditor。基本上是一场噩梦。不确定这是否完全相关，但我想我还是会分享一下，以防其他人遇到这个问题。它似乎更像是CKEditor（？）中的一个bug

每当DOM被sortable更改时，我都会使用回调来销毁/重新创建CKE（说来话长）

我正在调用
CKEDITOR.remove（ckInstance）
，这导致了与您得到的相同的错误

我还尝试在回调中调用
ckInstance.destroy（）
和
ckInstance.destroy（true）
（以避免更新已更改的DOM），但出现错误
无法读取未定义的属性“hasAttribute”
（而且，
无法读取行中某个位置的null属性“clearCustomData”）

我可以通过以下方式解决此问题：

ckInstance.removeAllListeners（）；
CKEDITOR.remove（ckInstance）；

CKEditor在清理自身之后似乎做得很糟糕，处理DOM更改的能力非常差（更不用说角度了……）

希望这能为其他人节省我花去的荒谬时间：）
我在使用Meteor和使用多个ckeditor实例时也遇到了同样的问题。这是被动DOM加载的一个常见问题，通常情况下，您的应用程序已按接收的顺序处理javaScript调用，但DOM可能未完全加载

要解决这个问题，我只需使用setTimeout来阻止代码

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

我只是编辑了缩小后的文件（在一个文本文件中为开发人员留下注释），并更改了错误发生的位置以检查null
从

到

我在两个地方这样做。
我将CKEDITOR.replace行放在函数中，而body onload调用函数

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

我在拉雷维尔也遇到过同样的问题。CKEDITOR.replace javascript在页面完全加载之前运行，因此发生此错误

为了确保页面完全加载，我将CKEDITOR.replace行放在一个函数中，而body onload调用了该函数，以添加到@thatgibbyguy答案中，以防不清楚。如果他的答案不适用于您，或者返回的ckeditor未找到，这是因为如果您在composer安装时遵循laravel ckeditor文档，则该答案不作为函数存在。在这种情况下，你需要以这种方式稍微修改他的答案，它就会起作用

<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
<script>
    setTimeout(function(){
        CKEDITOR.replace( 'article-ckeditor' ); //Your selector must match the textarea ID
    },400);
</script>


setTimeout（函数（）{
CKEDITOR.replace（'article CKEDITOR'）；//选择器必须与textarea ID匹配
},400);

请注意，我指的是它的供应商。查找artisan说明，将其包含在供应商的资源中。但我想它在CDN安装中也能起到同样的作用。
jQuery doc ready函数为我解决了这个问题

$(document).ready(function () {
    CKEDITOR.replace( 'content' ); 
});

请看@losmescaleros这里的答案：

简言之：

如果没有使用.remove（）从DOM中删除弹出框，则弹出框会出现问题

似乎
unselectable
是ckeditor的一个内部方法，您可以显示stacktrace吗？
areaVisible的方式/位置
set/modified？areaVisible是把手模板中的一个绑定值。父控制器跟踪哪个编辑器处于活动状态，以及areaVisible绑定到哪个编辑器。如果您可以在JSFIDLE中提供代码（即使它没有运行），也会很有帮助，即（JSFIDLE with ready libs），我在另一个SPA框架中也遇到了这种情况。看来CKEditor对水疗的效果不太好。我甚至从头开始重新创建元素，但它是如何记住它们的？非常奇怪……在CK编辑器（主干/木偶）的类似噩梦场景中，这对我起到了作用。谢谢使用
removeAllListeners
和
remove
而不是
destroy
帮助了我。这可能是因为
destroy
在其他功能（如
replace
设法完成）之前运行？使用Vue.js framework时遇到了相同的错误。非常好，谢谢-使用Knockout，您可以使用ko.utils.domNodeDisposal.addDisposeCal
<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
<script>
    setTimeout(function(){
        CKEDITOR.replace( 'article-ckeditor' ); //Your selector must match the textarea ID
    },400);
</script>

$(document).ready(function () {
    CKEDITOR.replace( 'content' ); 
});

$('body').popover({
                    selector: '[rel=popover]',
                    trigger: "click"
                }).on("show.bs.popover", function(e){
                    // hide all other popovers
                    $("[rel=popover]").not(e.target).popover("destroy");
                    $(".popover").remove();                    
                });