Communardo Software GmbH, Kleiststraße 10 a, D-01129 Dresden
0800 1 255 255

TinyMCE UMTS-kompatibel in eine Web-Applikation einbinden

Problem

Beim Aufruf einer Webseite mit inte­grier­tem TinyMCE WYSIWYG Editor über eine UMTS-Verbindung, kommt es bei eini­gen UMTS Providern zu JavaScript-Fehlern und der Editor wird nicht ange­zeigt. Führt man danach aber ein "Deep-Refresh" der Seite (z.B. über Strg+F5 im Firefox) aus oder ver­wen­det statt­des­sen eine DSL-Verbindung, wird der Editor voll­stän­dig gela­den und kor­rekt dar­ge­stellt.

 

Ursache

Die meis­ten Mobilfunkprovider lei­ten alle Requests über einen trans­pa­ren­ten Proxy, wel­cher diverse Transformationen an der Response vor­nimmt, um das Transfervolumen zu sen­ken. Zu die­sen Transformationen gehört neben der stär­ke­ren Komprimierung von Bildern meist auch das Einbinden von exter­nen Dateien (CSS und JavaScript) in das Hauptdokument. Dabei wer­den die script Tags so umge­schrie­ben, dass jeweils das src Attribut ent­fernt (oder auch umbe­nannt wird) und der Inhalt der refe­ren­zier­ten JavaScript Datei als Inline-Skript zwi­schen dem öff­nen­den und schlie­ßen­den Tag ein­ge­fügt wird. Dadurch schlägt letzt­lich die Initialisierung des TinyMCE fehl, da in die­ser Phase das src Attribut des script Tags, wel­ches die tiny_mce.js (bzw. tiny_mce_src.js). Datei ein­bin­det, aus­ge­wer­tet wird. Der Pfad zu die­ser Datei wird als Basis-URL für den Download wei­te­rer TinyMCE Dokumente inter­pre­tiert (z.B. Skripte der kon­fi­gu­rier­ten Plugins oder Dateien des ein­ge­stell­ten Themes). Das Fehlen des Attributs führt zu den JavaScript-Fehlern.
Ein "Deep-Refresh" dage­gen bewirkt, dass der Browser der Anfrage den Cache-Control Header mit dem Wert no-cache hin­zu­fügt. Dieser Header wird auch von den Proxies berück­sich­tigt und das Dokument unver­än­dert aus­ge­lie­fert, so dass der TinyMCE nor­mal initia­li­siert wer­den kann.

 

Lösungsmöglichkeit

Eine Möglichkeit, um das Problem zu lösen, ist es, dem TinyMCE auf einem ande­ren Weg die Basis-URL zum Download der ergän­zen­den Skripte mit­zu­tei­len, so dass nicht das src Attribut aus­ge­wer­tet wer­den muss. Hierbei muss zwi­schen den Einbindungsmöglichkeiten des Editors unter­schie­den wer­den.

1. Direkte Einbindung

Bei die­ser Methode wird der Editor ein­fach 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) ver­weist, inte­griert (vgl. TinyMCE:Installation). Das Setzen der Basis-URL kann durch Initialisieren der glo­ba­len Variable tinyMCEPreInit erfol­gen. Das Hauptskript erwar­tet, dass die Variable ein Objekt mit den Eigenschaften suf­fix, base und query refe­ren­ziert. Die Member haben dabei die fol­gende Bedeutung:

  • suf­fix: ent­we­der ein lee­rer String oder die Zeichenkette '_src'. Letztere sollte gesetzt wer­den, wenn die nicht-komprimierten Plugin-Skripte in das Dokument ein­ge­bun­den wer­den sol­len (z.B. zum Debuggen).
  • base: der Wert der zu ver­wen­den­den Basis-URL, wel­che 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" ein­ge­bun­den, dann ist die Basis-URL "http://server.de/javascript/tiny_mce".
  • query: erlaubt die Definition zusätz­li­cher Anfrageparameter, kann aber meist auf den lee­ren String gesetzt wer­den.

Ein voll­stän­di­ges Beispiel, das die kom­pri­mier­ten Skripte ver­wen­det sieht fol­gen­der­ma­ß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 fin­det sich in den aktu­el­len Versionen des TinyMCE (geprüft für 3.2.5, 3.2.7 und 3.3b1).

2. Enbindung über einen GZip Compressor

Bei die­ser Variante wird nicht das Hauptskript in das Dokument ein­ge­bun­den son­dern ein Skript, das einen ser­ver­sei­ti­gen Compressor auf­ruft, der die benö­tig­ten TinyMCE JavaScript Dateien (Hauptskript, Plugins, Themes etc.) als ein GZip gepack­tes JavaScript Dokument aus­lie­fert (vgl. TinyMCE:Compressor). Das Skript des Compressors (tiny_mce_gzip.js) ver­wen­det eben­falls das src Attribut, um die Anfrage-URL für die ser­ver­sei­tige Komponente zu gene­rie­ren. Um hier die Basis-URL zu set­zen, muss die init Methode des in die­sem Skript defi­nier­ten tinyMCE_GZ Objekts ein wenig ange­passt wer­den:

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 modi­fi­zierte Methode prüft, ob in den Settings eine baseUrl Eigenschaft vor­han­den ist. Wird die Eigenschaft gefun­den, wird sie als Basis-URL ver­wen­det und die Auswertung des src Attributs über­sprun­gen. Diese Eigenschaft kann dann ein­fach beim Initialisieren des Compressors gesetzt wer­den:

<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 getes­tet, kann aber auch auf die .NET und PHP Compressoren über­tra­gen wer­den, da der JavaScript Anteil gleich ist.

Related Posts

Pin It on Pinterest