JavaScript TinyMCE/jQuery-race condition bei firefox
Ich habe eine website mit einem Formular, das verwendet TinyMCE; unabhängig davon, nutze ich jQuery. Wenn ich laden Sie das Formular vom staging-server auf den Firefox 3 (MacOS X, Linux), TinyMCE nicht geladen wird. Es ist ein Fehler in der Firefox-Konsole, die sagen, dass t.getBody()
zurückgegeben null
. t.getBody()
, soweit ich das verstanden habe von der TinyMCE-Doku ist eine Funktion, die zurückgibt, Dokument s body-element geprüft werden für einige Funktionen. Problem tritt nicht auf, wenn ich mit Safari, noch, wenn ich Firefox verwenden mit dem gleichen Ort ausgeführt wird, von localhost.
Ursprünglichen, fehlerhaften JavaScript-code sah so aus:
<script type="text/javascript" src="http://static.alfa.foo.pl/json2.js"></script>
<script type="text/javascript" src="http://static.alfa.foo.pl/jquery.js"></script>
<script type="text/javascript" src="http://static.alfa.foo.pl/jquery.ui.js"></script>
<script type="text/javascript" src="http://static.alfa.foo.pl/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({ mode:"specific_textareas", editor_selector:"mce", theme:"simple", language:"pl" });
</script>
<script type="text/javascript" src="http://static.alfa.foo.pl/jquery.jeditable.js"></script>
<script type="text/javascript" src="http://static.alfa.foo.pl/jquery.tinymce.js"></script>
<script type="text/javascript" charset="utf-8" src="http://static.alfa.foo.pl/foo.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/* jQuery initialization */ });
</script>
Ich versucht, die änderung Skript laden um, bewegte tinyMCE.init()
call to the
<script/>
tag mit $(document).ready()
nennen—vor, nach und innerhalb dieser Aufruf. Kein Ergebnis. Wenn tinyMCE.init()
was called from within
$(document).ready()
handler, der browser hat hängen auf Anfrage—sieht aus wie es war zu spät, um die Funktion init aufrufen.
Then, after googling a bit about using TinyMCE together with jQuery, I changed tinyMCE.init()
Aufruf:
tinyMCE.init({ mode:"none", theme:"simple", language:"pl" });
Hinzugefügt und folgenden jQuery-Aufruf, um die $(document).ready()
handler:
$(".mce").each( function(i) { tinyMCE.execCommand("mceAddControl",true,this.id); });
aufrufen, Warnungen gegeben wurden, und TinyMCE Texteingabefelder wurden korrekt initialisiert. Ich dachte, dies kann sein eine Angelegenheit der Verzögerung durch das warten der user entlassen die Warnung, so stellte ich eine zweite Verzögerung durch ändern der Anruf, dass Sie noch innerhalb der $(document).ready () - handler, der folgenden:Still the same error. But, and here's where things start to look like real voodoo, when I added alert(i);
vor dem tinyMCE.execCommand()
setTimeout('$(".mce").each( function(i) { tinyMCE.execCommand("mceAddControl",stimmt dies.id); });',1000);
Mit dem timeout, TinyMCE Texteingabefelder richtig initialisiert, aber es ist duct Bandage um das eigentliche problem. Das problem sieht wie ein deutlicher race condition (vor allem wenn ich bedenke, dass auf den gleichen browser, aber, wenn der server auf localhost, problem nicht auftreten). Aber nicht die Ausführung von JavaScript single-threaded? Könnte jemand bitte mich aufklären, was ist denn hier Los, wo ist das eigentliche problem, und was kann ich tun, um es tatsächlich behoben?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Der browser führt Skripte in der Reihenfolge, wie Sie geladen sind, nicht geschrieben. Ihre unmittelbaren scripts --
tinyMCE.init(...)
und$(document.ready(...));
-- ausgeführt werden kann, bevor die Dateien geladen.So, das problem ist wahrscheinlich, Netzwerk-Latenz-vor allem mit 6 separaten scripts (jeweils erfordern einen anderen HTTP-Kommunikation zwischen browser und server). Also, der browser wird wahrscheinlich versuchen, ausführen
tinyMCE.init()
vor tiny_mce.js fertig geparsed undtinyMCE
ist voll definiert.Wenn nicht Firebug, es bekommen. 😉
Es hat eine Net - Registerkarte, wird Ihnen zeigen, wie lange es nimmt alle Ihre Skripte zu laden.
Während Sie können prüfen, die
setTimeout
werden duct-taping, es ist eigentlich eine anständige Lösung. Das einzige problem was ich sehe ist, dass es meint 1 Sekunde immer fix. Eine schnelle Verbindung, und Sie konnte sehen, wie die pause. Eine langsame Verbindung und es wartet nicht lange genug -- Sie weiterhin die Fehlermeldung erhalten.Alternativ können Sie in der Lage sein zu verwenden
window.onload
- vorausgesetzt, jQuery nicht bereits verwenden. (Kann das jemand anderes verifizieren?)War, dass eine direkte Kopie?
Es fehlt der
)
Endeready
:Fehlende Satzzeichen können verursachen viel Schaden. Der parser ist einfach immer wieder Lesen, bis er Sie findet -- vermasselt alles, was in zwischen.
Da dies die erste Seite die kam in google wenn ich mir die selbe Frage gestellt, dies ist, was ich gefunden habe über dieses problem.
Quelle
Gibt es eine callback-Funktion im tinyMCE das ausgelöst wird, wenn die Komponente geladen und bereit. Sie können es verwenden, wie diese :
Wenn Sie
jquery.tinymce.js
dann brauchen Sie nichttiny_mce.js
weil der TinyMCE wird versuchen, laden Sie es mit einem ajax-request. Wenn Sie finden, dasswindow.tinymce
(oder einfachtinymce
) istundefined
ist, dann bedeutet dies, dass die ajax ist noch nicht abgeschlossen (das könnte erklären, warumsetTimeout
für Sie gearbeitet). Dies ist die typische Reihenfolge von Ereignissen:jquery.js
mit einem script-tag (oder google laden).jquery.tinymce.js
mit einem script-tag.Dokument bereit-Ereignis ausgelöst; dies ist, wo Sie nennen
.tinymce(settings)
auf Ihretextarea
s. E. g.$('textarea').tinymce({ script_url: '/tiny_mce/tiny_mce.js' })
Laden
tiny_mce.js
ist dieser Schritt getan für Sie, die von TinyMCE ' s jQuery-plugin, aber es könnte passieren, nachdem der document-ready-event feuert.Manchmal könnten Sie wirklich brauchen, um Zugang
window.tinymce
, hier ist der sicherste Weg, es zu tun:$(document).tinymce({
'script_url': '/tiny_mce/tiny_mce.js'
'setup': function() {
alert(tinymce);
}
});
TinyMCE wird so weit gehen, erstellen Sie eine
tinymce.Editor
Objekt und führen Sie das setup-callback. Keiner von der Redaktion Ereignisse ausgelöst werden und der editor-Objekt erstellt, für das Dokument nicht Hinzugefügttinymce.editors
.Fand ich auch, dass der TinyMCE die ajax-Aufruf war, sich mit meiner
.ajaxStop
Funktionen also ich habe auch einesetTimeout
:$(document).tinymce({
'script_url': '/tiny_mce/tiny_mce.js'
'setup': function() {
setTimeout(function () {
$(document).ajaxStart(function(e) {/* Sachen, die /});
$(document).ajaxStop(function(e) {/ stuff */});
}, 0);
}
});