CKEditor Uncaught TypeError: Cannot call method 'nicht auswählbare' von null in EmberJS single page app mit mehreren Editoren

Ich habe eine single-page-app erstellt mit EmberJS.

Ich habe 3 Texteingabefelder auf der Seite.

Ich bin rendering der ckeditor einmal die textarea eingefügt wurde, in den dom, und ich bin das Kennzeichnen einer Eigenschaft auf die Steuerung der Aufnahme, dass der ckeditor wurde gerendert so dass ich nicht Rendern, es mehr als einmal.

Ich bin auch auf der Suche in den dom, um zu überprüfen, dass es momentan nicht einen editor gibt.

Beim aktualisieren der Seite bin ich immer diese Fehlermeldung zufällig:

Uncaught TypeError: Cannot call method 'unselectable' of null

Ich weiß nicht, was es verursacht oder wie jetzt zu verhindern. Wenn es nicht zu werfen, dass die Fehler, die alle 3 ckeditors erscheinen nur in Ordnung.

Hier ist meine intiation code für den editor:

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

Ich bin auch mit dem "onChange" - plugin für ckeditor, das Feuer aus einem "onChange" - Ereignis aus, wenn sich etwas ändert im editor und bin darauf zu reagieren.

Was ich versucht habe:

  • entfernen der onChange-plugin
  • ändern ckeditor auf die 4.3 beta-version
  • entfernen der Anpassungen der Symbolleiste für den
  • entfernen das onChange-Ereignis-listener
  • überprüfen Sie, dass alle Texteingabefelder haben Inhalte in Ihnen beim Rendern

Was muss ich tun, um dies zu beheben?

BEARBEITEN

Hier ist der stack-trace: (ich bin in der Wende auf die ver-string in meiner app)

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)

EDIT #2:

Hier ist ein Turnschuh der spezifische Bereich der Anwendung, in der das Problem Auftritt:
http://jsfiddle.net/sSaCd/3/

  • Es scheint, dass unselectable ist eine interne Methode von ckeditor kann man den stacktrace?
  • Wie/wo ist areaVisible eingestellt/verändert?
  • AreaVisible ist eine gebundene Wert in den LENKER Vorlage. Der parent-controller verfolgt, welche-editor aktiv ist, und das ist, was areaVisible gebunden ist.
  • Es wäre hilfreich, wenn könnten Sie bitte geben Sie Ihren code in jsfiddle (auch wenn es nicht ausgeführt wird), d.h. (jsfiddle mit fertigen libs jsfiddle.net/sSaCd )
  • Ich erlebe diese mit anderen SPA-framework zu. Es scheint, dass der CKEditor funktioniert nicht allzu gut mit SPAs. Ich bin sogar Neuerstellung der Elemente von Grund auf, aber einige, wie er sich an Sie erinnert? Sehr seltsam...
  • Ich wechselte mit Redakteur (imperavi.com/redactor). Alles gelöst.

InformationsquelleAutor Chuck | 2013-10-11
Schreibe einen Kommentar