CKEditor 未捕获的类型错误:无法在具有多个编辑器的 EmberJS 单页应用程序中调用 null 的“不可选择”

CKEditor Uncaught TypeError: Cannot call method 'unselectable' of null in EmberJS single page app with multiple editors

本文关键字:应用程序 单页 编辑器 EmberJS 调用 不可选择 可选择 null 类型 错误 CKEditor      更新时间:2023-09-26

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

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

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

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

编辑

这是堆栈跟踪:(我正在我的应用程序中添加 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/

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

每当 DOM 被可排序更改时,我都有破坏/重新创建 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了......

希望这可以节省其他人花费的荒谬时间,我花了很长时间才弄清楚:)

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

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

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

我把 CKEDITOR.replace 行放在一个函数里面,并在 body onload 调用该函数

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

为了确保页面完全加载,我将 CKEDITOR.replace 行放在一个函数中,并在正文加载时调用该函数

jQuery doc ready 函数为我解决了这个问题

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

我刚刚编辑了缩小的文件(在文本文件中为开发人员留下注释(,只是更改了发生错误的位置以检查空值从

&&a.ui.space("top").unselectable();

&&a.ui.space("top")!=null&&a.ui.space("top").unselectable();

我在两个地方这样做了。

添加到@thatgibbyguy答案中,以防不清楚。如果他的答案对你不起作用,或者返回的 ckeditor 未找到,那是因为如果你按照 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>

请注意,我将其称为供应商。查找工匠说明以将其包含在供应商的资源中。但我想它会与 CDN 安装一样工作。

看看这里的@losmescaleros答案:https://stackoverflow.com/a/25252552/13179424

简而言之:

如果不使用 .remove(( 从 DOM 中删除弹出窗口,则存在导致问题的问题

$('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();                    
                });

尝试调用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()