Problem

Beim Aufruf einer Webseite mit integriertem TinyMCE WYSIWYG Editor über eine UMTS-Verbindung, kommt es bei einigen UMTS Providern zu JavaScript-Fehlern und der Editor wird nicht angezeigt. Führt man danach aber ein “Deep-Refresh” der Seite (z.B. über Strg+F5 im Firefox) aus oder verwendet stattdessen eine DSL-Verbindung, wird der Editor vollständig geladen und korrekt dargestellt.

Ursache

Die meisten Mobilfunkprovider leiten alle Requests über einen transparenten Proxy, welcher diverse Transformationen an der Response vornimmt, um das Transfervolumen zu senken. Zu diesen Transformationen gehört neben der stärkeren Komprimierung von Bildern meist auch das Einbinden von externen Dateien (CSS und JavaScript) in das Hauptdokument. Dabei werden die script Tags so umgeschrieben, dass jeweils das src Attribut entfernt (oder auch umbenannt wird) und der Inhalt der referenzierten JavaScript Datei als Inline-Skript zwischen dem öffnenden und schließenden Tag eingefügt wird. Dadurch schlägt letztlich die Initialisierung des TinyMCE fehl, da in dieser Phase das src Attribut des script Tags, welches die tiny_mce.js (bzw. tiny_mce_src.js). Datei einbindet, ausgewertet wird. Der Pfad zu dieser Datei wird als Basis-URL für den Download weiterer TinyMCE Dokumente interpretiert (z.B. Skripte der konfigurierten Plugins oder Dateien des eingestellten Themes). Das Fehlen des Attributs führt zu den JavaScript-Fehlern.
Ein “Deep-Refresh” dagegen bewirkt, dass der Browser der Anfrage den Cache-Control Header mit dem Wert no-cache hinzufügt. Dieser Header wird auch von den Proxies berücksichtigt und das Dokument unverändert ausgeliefert, so dass der TinyMCE normal initialisiert werden kann.

Lösungsmöglichkeit

Eine Möglichkeit, um das Problem zu lösen, ist es, dem TinyMCE auf einem anderen Weg die Basis-URL zum Download der ergänzenden Skripte mitzuteilen, so dass nicht das src Attribut ausgewertet werden muss. Hierbei muss zwischen den Einbindungsmöglichkeiten des Editors unterschieden werden.

1. Direkte Einbindung

Bei dieser Methode wird der Editor einfach durch Hinzufügen eines script Tags, das auf das Hauptscript tiny_mce.js (bzw. die nicht-komprimierte Variante mit allen Leerzeichen, Zeilenumbrüchen und Kommentaren tiny_mce_src.js) verweist, integriert (vgl. TinyMCE:Installation). Das Setzen der Basis-URL kann durch Initialisieren der globalen Variable tinyMCEPreInit erfolgen. Das Hauptskript erwartet, dass die Variable ein Objekt mit den Eigenschaften suffix, base und query referenziert. Die Member haben dabei die folgende Bedeutung:

• suffix: entweder ein leerer String oder die Zeichenkette ‘_src’. Letztere sollte gesetzt werden, wenn die nicht-komprimierten Plugin-Skripte in das Dokument eingebunden werden sollen (z.B. zum Debuggen).
• base: der Wert der zu verwendenden Basis-URL, welche auf das Verzeichnis der TinyMCE Installation zeigt. Wurde z.B. das tiny_mce.js Skript mit der Adresse “http://server.de/javascript/tiny_mce/tiny_mce.js” eingebunden, dann ist die Basis-URL “http://server.de/javascript/tiny_mce”.
• query: erlaubt die Definition zusätzlicher Anfrageparameter, kann aber meist auf den leeren String gesetzt werden.

Ein vollständiges Beispiel, das die komprimierten Skripte verwendet sieht folgendermaßen aus:

<script type="text/javascript">
tinyMCEPreInit = {
    suffix: '',
    base: 'http://server.de/javascript/tiny_mce',
    query: ''
};
</script>
<script type="text/javascript" src="http://server.de/javascript/tiny_mce/tiny_mce.js" />

Hinweis: Die Variable findet sich in den aktuellen Versionen des TinyMCE (geprüft für 3.2.5, 3.2.7 und 3.3b1).

2. Enbindung über einen GZip Compressor

Bei dieser Variante wird nicht das Hauptskript in das Dokument eingebunden sondern ein Skript, das einen serverseitigen Compressor aufruft, der die benötigten TinyMCE JavaScript Dateien (Hauptskript, Plugins, Themes etc.) als ein GZip gepacktes JavaScript Dokument ausliefert (vgl. TinyMCE:Compressor). Das Skript des Compressors (tiny_mce_gzip.js) verwendet ebenfalls das src Attribut, um die Anfrage-URL für die serverseitige Komponente zu generieren. Um hier die Basis-URL zu setzen, muss die init Methode des in diesem Skript definierten tinyMCE_GZ Objekts ein wenig angepasst werden:

init : function(s, cb, sc) {
    var t = this, n, i, nl = document.getElementsByTagName('script');

    for (n in s)
        t.settings[n] = s[n];

    s = t.settings;
    if (s.baseUrl) {
        t.baseURL = s.baseUrl;
    } else {
        for (i=0; i<nl.length; i++) {
            n = nl[i];

            if (n.src && n.src.indexOf('tiny_mce') != -1)
                t.baseURL = n.src.substring(0, n.src.lastIndexOf('/'));
        }
    }
    if (!t.coreLoaded)
        t.loadScripts(1, s.themes, s.plugins, s.languages, cb, sc);
}

Die modifizierte Methode prüft, ob in den Settings eine baseUrl Eigenschaft vorhanden ist. Wird die Eigenschaft gefunden, wird sie als Basis-URL verwendet und die Auswertung des src Attributs übersprungen. Diese Eigenschaft kann dann einfach beim Initialisieren des Compressors gesetzt werden:

<script type="text/javascript">
tinyMCE_GZ.init({
    baseUrl: 'http://server.de/javascript/tiny_mce',
    ... normal init of compressor ...
});
</script>
<script type="text/javascript" src="http://server.de/javascript/tiny_mce/tiny_mce_gzip.js" />

Hinweis: Das Code-Beispiel für den Compressor wurde mit dem JSP Compressor in der Version 2.0.2 getestet, kann aber auch auf die .NET und PHP Compressoren übertragen werden, da der JavaScript Anteil gleich ist.