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.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich hatte ein ähnliches problem mit AngularJS und jQuery UI Sortable mit mehreren CKEditors auf der Seite. Im Grunde ein Alptraum-setup. Nicht sicher, ob dies ist auch ganz im Zusammenhang, aber ich dachte, ich würde teilen, jedenfalls für den Fall, jemand anderes kommt über dieses Problem. Es scheint ein bug im CKEditor (http://dev.ckeditor.com/ticket/11924 ?) mehr als alles andere.
Wenn der DOM wird geändert, indem sortierbar, ich habe Rückrufe zu zerstören/neu das CKEs (lange Geschichte).
Ich rief
CKEDITOR.remove(ckInstance)
, die zu der gleichen Fehlermeldung, die Sie immer waren.Ich auch versucht, Sie anzurufen, ruft
ckInstance.destroy()
undckInstance.destroy(true)
(um zu vermeiden, aktualisieren der DOM-hatte die auch schon geändert) in meinem Rückruf, aber habe den FehlerCannot read property 'hasAttribute' of undefined
(und auchCannot read property 'clearCustomData' of null
irgendwo entlang der Linie).Ich war in der Lage, um dieses Problem zu beheben, über die folgenden:
ckInstance.removeAllListeners();
CKEDITOR.remove(ckInstance);
CKEditor scheint ein schrecklicher job Reinigung nach sich und Griffe DOM-änderungen, die unglaublich schlecht (nicht zu erwähnen, Eckig...)
Hoffentlich spart jemand anderes den lächerlichen Betrag von Zeit, die es dauerte, um es herauszufinden 🙂
removeAllListeners
undremove
stattdestroy
hat mir geholfen. Kann es sein, weildestroy
ausgeführt wird, bevor andere Funktionen wiereplace
verwalten zu beenden? Erlebte gleichen Fehler mit Vue.js Rahmen.Ich hatte das gleiche Problem mit Meteor und mehrere ckeditor-Instanzen, wie gut. Dies ist ein häufiges problem mit reaktiven DOM-laden im Allgemeinen in dem Ihre app verarbeitet hat Ihren javaScript-Aufrufe in der Reihenfolge Sie empfangen, aber der DOM kann nicht vollständig geladen werden.
Um dieses Problem zu lösen habe ich einfach block den code mit setTimeout.
Ich gerade bearbeitet die minified Datei (verlassen Notizen in eine text-Datei für die Entwickler), und nur geändert, wo mein Fehler ausgeführt wurde, auf null prüfen
von
zu
Ich Tat dies in zwei stellen.
Versuchen Sie anrufen
ck_editor.destroy
wock_editor
ist Ihr editor-Instanz. Aus irgendeinem Grund CKEDITOR scheint zu hängen, um alte Instanzen. Wenn Sie Sie zu zerstören, wird der Fehler scheint Weg zu gehen.Hatte ich den CKEDITOR.ersetzen Sie die Zeile innerhalb einer Funktion und beim body onload die Funktion aufgerufen.
Ich stieß ins gleiche Art von Problem in laravel. Der CKEDITOR.ersetzen Sie javascript ausgeführt wurde, bevor die Seite vollständig geladen wurde, wegen denen dieser Fehler aufgetreten ist.
sicherstellen, dass die Seite komplett geladen hatte ich den CKEDITOR.ersetzen Sie die Zeile innerhalb einer Funktion und beim body onload die Funktion aufgerufen