web-dev-qa-db-ja.com

CKEditor Uncaught TypeError：複数のエディターを備えたEmberJSシングルページアプリでnullのメソッド 'unselectable'を呼び出すことができません

EmberJSを使用して作成されたシングルページアプリがあります。

ページに3つのテキストエリアがあります。

Textareaがdomに挿入されたら、ckeditorをレンダリングします。また、ckeditorがレンダリングされたことを記録するコントローラーのプロパティにフラグを立てて、2回以上レンダリングしないようにします。

私は、現在そこに編集者がいないことを確認するために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/

javascriptjqueryhtmlember.jsckeditor
12
Chuck

ページ上の複数のCKEditorで並べ替え可能なAngularJSとjQueryUIで同様の問題が発生していました。基本的に悪夢のような設定。これが完全に関連しているかどうかはわかりませんが、他の誰かがこの問題に遭遇した場合に備えて、とにかく共有したいと思いました。何よりも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は言うまでもありません...）

うまくいけば、これは私がそれを理解するのにかかったばかげた時間を他の誰かに節約するでしょう:)

21
mwalsher

Meteorを使用し、複数のckeditorインスタンスも使用して同じ問題が発生しました。これは、一般的なリアクティブDOM読み込みの一般的な問題であり、アプリは受信した順序でjavaScript呼び出しを処理しますが、DOMが完全に読み込まれない場合があります。

これを解決するには、setTimeoutでコードをブロックします。

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

縮小したファイルを編集し（開発者向けにテキストファイルにメモを残しました）、エラーが発生した場所を変更して、からnullをチェックしました。

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

に

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

私はこれを2か所で行いました。

1
Valamas

CKEDITOR.replace行を関数内に配置し、body onloadが関数を呼び出している間。

私はlaravelで同じ種類の問題にぶつかりました。このエラーが発生したため、ページが完全に読み込まれる前にCKEDITOR.replacejavascriptが実行されていました。

ページが完全に読み込まれたことを確認するために、関数内にCKEDITOR.replace行を配置し、bodyonloadが関数を呼び出している間に

0
Anand

明確でない場合に備えて、@ 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
LOTUSMS

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
wmarbut