ember.js CKEditor未捕获类型错误：无法在具有多个编辑器的EmberJS单页应用程序中调用null的“unselectable”方法

hzbexzde 于 2022-11-05 发布在其他

关注(0)|答案(8)|浏览(140)

我有一个使用EmberJS创建的单页应用程序。
我在页面上有3个文本区域。
一旦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测试版
移除工具列自订
删除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/

ember.js

来源：https://stackoverflow.com/questions/19328548/ckeditor-uncaught-typeerror-cannot-call-method-unselectable-of-null-in-emberj

8条答案

按热度按时间

hmmo2u0o1#

我在AngularJS和jQuery UI Sortable中遇到了类似的问题，页面上有多个CKEditor。基本上是一个噩梦般的设置。不确定这是否完全相关，但我想我还是要分享一下，以防其他人遇到这个问题。这似乎是CKEditor（http://dev.ckeditor.com/ticket/11924？）中的一个bug。
每当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 ...）
希望这能为别人省下我花在弄清楚这件事上的可笑的时间：）

赞(0）回复(0）举报 2022-11-05

deikduxw2#

我在使用Meteor和多个ckeditor示例时也遇到了同样的问题。这是一个React式DOM加载的常见问题，通常情况下，您的应用程序会按照接收到的顺序处理javaScript调用，但DOM可能没有完全加载。
要解决这个问题，我只需使用setTimeout阻塞代码。

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

赞(0）回复(0）举报 2022-11-05

gj3fmq9x3#

我将CKEDITOR.replace行放在函数内，而body onload调用了该函数。

我在laravel中遇到了同样的问题。在页面完全加载之前，CKEDITOR.replace javascript正在运行，因此发生了此错误。
为了确保页面完全加载，我将CKEDITOR.replace行放在了一个函数中，而while body onload调用了该函数，

赞(0）回复(0）举报 2022-11-05

vhmi4jdf4#

jQuery的文档就绪功能为我解决了这个问题

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

赞(0）回复(0）举报 2022-11-05

nwlls2ji5#

我只是编辑了缩小的文件（在文本文件中为开发人员留下注解），并且只是更改了错误发生的位置，以从

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

至

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

我在两个地方做了这个。

赞(0）回复(0）举报 2022-11-05

tmb3ates6#

为了补充@thatgibbyguy的答案，以防不清楚。如果他的答案对你不起作用或者返回的ckeditor未找到，这是因为如果你按照laravel-ckeditor文档安装composer，它并不作为函数存在。在这种情况下，你需要稍微修改他的答案，这样它就会起作用

<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安装。

赞(0）回复(0）举报 2022-11-05

9bfwbjaz7#

看看@ losescaleros在这里回答：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();                    
                });

赞(0）回复(0）举报 2022-11-05

elcex8rz8#

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

赞(0）回复(0）举报 2022-11-05

我来回答

ember.js CKEditor未捕获类型错误：无法在具有多个编辑器的EmberJS单页应用程序中调用null的“unselectable”方法

8条答案

相关问题

热门标签

最新问答