14

EmberJS を使用して作成された単一ページ アプリがあります。

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

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

現在、そこにエディターがいないことを確認するために、dom を調べています。

ページを更新すると、次のエラーがランダムに発生します。

Uncaught TypeError: Cannot call method 'unselectable' of null

何が原因なのか、それを防ぐために今なのかはわかりません。そのエラーがスローされない場合、3 つの ckeditors はすべて正常に表示されます。

エディターの開始コードは次のとおりです。

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/

4

8 に答える 8

26

ページに複数のCKEditorがあるAngularJSとjQuery UI Sortableで同様の問題が発生していました。基本的に悪夢の設定。これが完全に関連しているかどうかはわかりませんが、他の誰かがこの問題に遭遇した場合に備えて、とにかく共有すると思いました. 何よりもCKEditor ( http://dev.ckeditor.com/ticket/11924 ?) のバグのようです。

DOM が sortable によって変更されるたびに、CKE を破棄/再作成するコールバックがあります (長い話)。

を呼び出しCKEDITOR.remove(ckInstance)ていたところ、同じエラーが発生しました。

また、コールバックで (既に変更された DOM の更新を避けるために) ckInstance.destroy()andの呼び出しを試みましたが、エラー(および行のどこか) が発生しました。ckInstance.destroy(true)Cannot read property 'hasAttribute' of undefinedCannot 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 に答える
1

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

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

に

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

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

于 2015-07-17T01:58:06.667 に答える
0

エディター インスタンスの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()
于 2014-01-14T20:53:19.003 に答える