14

我有一个使用 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 beta 版本
  • 删除工具栏自定义
  • 移除 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/

4

8 回答 8

26

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

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

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

我还尝试在我的回调中调用调用ckInstance.destroy()and ckInstance.destroy(true)（以避免更新已经更改的 DOM），但得到了错误Cannot read property 'hasAttribute' of undefined（以及Cannot read property 'clearCustomData' of null沿线的某个地方）。

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

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

CKEditor 似乎在自行清理方面做得很糟糕，并且处理 DOM 更改的效果非常差（更不用说 Angular ...）

希望这可以节省其他人花费我弄清楚它的荒谬时间:)

于 2014-08-22T21:18:06.180 回答
16

我在使用 Meteor 时遇到了同样的问题，并且也有多个 ckeditor 实例。这是反应式 DOM 加载的一个常见问题，在这种情况下，您的应用程序已按照接收到的顺序处理您的 JavaScript 调用，但 DOM 可能未完全加载。

为了解决这个问题，我只需使用 setTimeout 阻止代码。

setTimeout(function(){
    $('#content-area').ckeditor();
},100);
于 2015-06-05T14:23:34.077 回答
2

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

$(document).ready(function () {
    CKEDITOR.replace( 'content' ); 
});
于 2020-04-03T20:31:52.767 回答
2

我已将 CKEDITOR.replace 行放在一个函数中，而 body onload 则调用了该函数。

我在 laravel 中遇到了同样的问题。CKEDITOR.replace javascript 在页面完全加载之前运行，因此发生此错误。

为了确保页面完全加载，我将 CKEDITOR.replace 行放在函数中，而 body onload 调用了函数

于 2019-06-07T20:46:24.313 回答
1

要添加到@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 安装相同。

于 2020-01-21T16:16:47.643 回答
1

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

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

至

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

我在两个地方做了这个。

于 2015-07-17T01:58:06.667 回答
1

在这里查看@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();                    
                });
于 2021-03-24T15:10:59.667 回答
0

尝试调用ck_editor.destroywhere ck_editoris your 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()
于 2014-01-14T20:53:19.003 回答