Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Dr. Detlef Groth 4. September 2007

Serienbriefe mit Online-WYSIWYG-Editoren

Kein Beitragsbild

Dass sich Serienbriefe im Webbrowser sowohl aus XML und aus HTML-Dokumenten erzeugen lassen, haben wir in zwei vorangegangen Artikeln auf Dr. Web bereits demonstriert. Störend an diesen Implementierungen war die notwendige Bearbeitung des HTML- und XML-Quellcodes. Nun wollen wir die HTML-Variante so verbessern, dass der Brieftext mit Hilfe eines Online-WYSIWYG-Editors eingegeben werden kann.

Anzeige

Serienbriefe mit JavaScript und HTML
Im Artikel Serienbriefe für den Webbrowser mit HTML und JavaScript haben wir das Brief-Template und die Tabelle mit den Daten der Empfänger im selben HTML-Dokument gespeichert. Durch den JavaScript-Code wurde die Tabelle durchlaufen und eine Template-Kopie mit dem Inhalt jeder Zeile gefüllt und diese dann in das HTML-Dokument eingebunden. Durch unterschiedliche Stylesheet-Angaben für die Ausgabemedien screen und print wurden die relevanten Bereiche für den Druck ein- bzw. ausgeblendet.

Beispielbild für Serienbrief mit TinyMCE

Anzeige

Um die Integration eines WYSIWYIG-Editors zu erleichtern, wollen wir jetzt das Template des vorangegangen Artikels modifizieren. Als Platzhalter dienen nun Zeichenketten der Art __Spaltenname__. Diese werden dann für jede Tabellenzeile durch den Inhalt der entsprechenden Spalte ersetzt. Hier ein Beispiel für ein solches Template:

 <div id="template"> <div class="absender"> Abs:<br /> Posemuckel Laufclub<br /> 12356 Posemuckel<br>Am Traumschiffhafen 1 </div> <div class="small"> Abs: Posemuckel Laufclub, 12356 Posemuckel, Am Traumschiffhafen 1 </div> <div class="anschrift"> An<br /> __Vorname__ __Name__ <br /> __Strasse__ <br /> __PLZ__ __Ort__ </div> <div class="anschreiben"> <div class="ueberschrift"> __Anrede__ __Name__, </div> <div class="text"> hiermit laden wir Dich recht herzlich zu unserer Mitgliederversammlung am 1.1.2010 in unser Vereinslokal am Templiner See 12 in der Gaststätte "Zum Posemuckler" ein. Bitte teile uns - entweder telefonisch (1234567) oder per Email (info@posemuckel-laufclub.de) - mit, ob Du daran teilnehmen kannst. </div> <div class="abschluss"> Dein Vorstand </div> </div> </div>

JavaScript-Code für das Erstellen des Serienbriefes
Durch den Verzicht auf die Span-Tags verkürzt sich der Code etwas. Nach dem vollständigen Laden wird das HTML-Dokument verarbeitet: die Spaltenköpfe der Datentabelle werden in dem Array bezeichner abgelegt, eine Kopie des Templates wird erzeugt und für jede Zeile des Tbody-Elements das Ersetzen in der Template-Kopie durchgeführt. Abschließend wird diese Kopie ans Ende des Dokumentes angehängt. Der Code könnte durch den Einsatz einer JavaScript-Bibliothek wie Prototype oder JQuery natürlich weiter komprimiert werden aber bei weniger als 30 Zeilen existiert dazu kaum eine Notwendigkeit. Hier unser JavaScript-Code:

 function parseDocument() { var table = document.getElementById("datatable"); var letter = document.getElementById("letterpart"); var template = document.getElementById("template"); var bezeichner = new Array(); var ths = table.getElementsByTagName("th"); // bezeichner extrahieren for (var i = 0 ; i < ths.length;i++) { // eventuelle leerzeichen entfernen bezeichner[i] = ths[i].firstChild.data.replace(/ /g, ""); } // datenreihen extrahieren var tbody = table.getElementsByTagName("tbody")[0]; var trs = tbody.getElementsByTagName("tr"); // zellen fuer jede zeile auslesen for (var i = 0 ; i < trs.length; i++) { // kopie des templates erstellen var div = document.createElement("div"); div.className = "template"; div.innerHTML = template.innerHTML; var tds = trs[i].getElementsByTagName("td"); for (var j = 0 ; j < tds.length;j++) { // und fuellen des templates while (div.innerHTML.indexOf("__"+bezeichner[j]+"__") >= 0) { div.innerHTML = div.innerHTML.replace("__"+bezeichner[j]+"__",tds[j].firstChild.data); } } // anhaengen des ausgefuellten templates letter.appendChild(div); } } window.onload = function () { parseDocument(); }

Einbinden des WYSIWYG-Editors
Nun wollen wir einen WYSIWYG-Editor nutzen um den Text des Serienbriefes nach dem Aufrufen der Webseite verändern zu können. Wir verwenden TinyMCE welcher im Vergleich zu anderen Editoren auf einer größeren Anzahl von Browsern lauffähig ist. Den Editor binden wir wie folgt ein: Im Head-Bereich laden wir die TinyMCE-JavaScript-Datei und initialisieren den Editor für unser Div-Element welches den Text enthält. Mit dem Parameter elements werden dabei die IDs der editierbaren Bereiche ausgewählt.

 <script language="javascript" type="text/javascript" src="tiny_mce/tiny_mce.js"> </script> <script language="javascript" type="text/javascript"> tinyMCE.init({ mode : "exact", theme : "simple", elements : "anschreiben", width: "98%" }); </script> <script language="javascript" type="text/javascript" src="beispiel-tinymce.js"> </script>

TinyMCE kann sowohl für das Editieren von Textarea-Elementen als auch von Div-Elementen eingesetzt werden. Die Verwendung eines Div-Elementes erleichtert die Erstellung des Templates da im Text vorhandene HTML-Tags nicht geschützt werden müssen. Deswegen wollen wir hier ein solches Div-Element verwenden:

 <form name="tmce"> <div id="anschreiben" class="text"> hiermit laden wir Dich recht herzlich zu unserer Mitgliederversammlung am 1.1.2010 in unser Vereinslokal am Templiner See 12 in der Gaststätte "Zum Posemuckler" ein. Bitte teile uns - entweder telefonisch (1234567) oder per Email (info@posemuckel-laufclub.de) - mit, ob Du daran teilnehmen kannst. </div> </form>

Der JavaScript-Code für das Füllen des Templates
Im Vergleich zur obigen Variante ohne Editor müssen einige Veränderungen am Code vorgenommen werden. So erfolgt das Füllen des Templates erst nach Anforderung durch den Anwender und nicht mehr im onload-Ereignis des Dokumentes – schließlich soll der Brief erst nach dem Laden des Dokumentes erstellt werden. Diese manuelle Anforderung wird mit zwei Links am Anfang des Dokumentes, welche zwischen Editier- und Druck-Modus durch das Aufrufen der entsprechenden JavaScript-Funktion umschalten, erreicht:

 <span id="editLink" style="display:none;"> <a href="javascript:editContent()">Editieren</a> </span> <span id="printLink"> <a href="javascript:updateContent()">Drucken</a> </span>

Desweiteren muß der Template-Text vor dem Einsetzen in den Briefbereich von den Editor-Elementen befreit werden. Da TinyMCE das ursprüngliche Div-Element das den zu editierenden Start-Text enthält versteckt, muß dieses Element wieder sichtbar gemacht werden. Hier der komplette JavaScript-Code für den Einsatz des TinyMCE-Editors: beispiel-tinymce.js

Das funktionierende Beispiel zum Testen: beispiel-tinymce.html

Wie man der TinyMCE-API entnehmen kann bietet der Editor einige Dutzend Methoden die bei der Enwicklung von JavaScript-Anwendungen von Nutzen sind. Beispiele dafür sind importCSS, selectNodes oder convertHex2RGB.

Performance
Wichtig für die Einschätzung der Verwendbarkeit der Serienbrief-Anwendung ist die Performance welche wir hier an einigen hundert Datensätzen testen wollen. Dazu hängen wir mittels JavaScript-Code die Datensätze an unsere Tabelle an und bestimmen anschließend die Zeit welche der Browser für die Erstellung der Briefe braucht. Auf einem älteren Notebook mit 1Ghz-Prozessor braucht der Browser etwa 30 Sekunden bis 2 Minuten für 1000 Datensätze was eine ganz brauchbare Geschwindigkeit darstellt. Es kann allerdings zu größeren zeitlichen Unterschieden zwischen den einzelnen Browsern kommen. Testen Sie die Performance für 500 und mehr Datensätze auf Ihrem eigenen Rechner: beispiel-tinymce2.html

Andere Einsatzmöglichkeiten von Online-WYSIWYG-Editoren
Neben der vorgestellten Serienbrief-Anwendung lassen sich WYSIWYG-Editoren natürlich auch anderweitig einsetzen. So könnnen zum Beispiel Dokument-Templates zentral auf dem Intranet-Server einer Firma gespeichert werden. Statt der üblichen Verteilung der Firmen-Templates in Form von Word-Dokumenten auf alle Client-Rechner und dem versehentlichen Verändern der Dokumente dort, einfach die Intranet-URL ansteuern, Text eingeben, ausdrucken – fertig. Die übliche Neuverteilungs-Orgie der Templates schon bei kleinsten Änderungen entfällt. Es ergibt sich ein enormes Einsparpotential an Arbeitszeit.

Zwei Editoren auf einer Seite
Nun ein Beispiel für die zweifache Integration des Editors in eine HTML-Seite. Diesmal der Einfachheit halber ohne Serienbrief-Funktion. Da wir für den Adress- und den Textbereich Editoren in unterschiedlicher Breite benötigen, führen wir die Initialisierung jeweils seperat durch:

 <script language="javascript"> tinyMCE.init({ mode : "exact", theme : "simple", elements : "anschrift", width: "30%", height: "80px" }); tinyMCE.init({ mode : "exact", theme : "simple", elements : "content", width: "90%" }); </script>

Das Speichern der Editor-Inhalte ist hier etwas komplizierter, da in der globalen Instanz tinyMCE nur ein Editor gespeichert ist. Deswegen durchlaufen wir im JavaScript-Code alle Instanzen und aktivieren diese seperat. Danach erfolgt das Speichern der Inhalte.

 function updateContent () { // fuer jede instanz !! var form = document.getElementsByTagName("form")[0]; var inputs = form.getElementsByTagName("input"); for (var i = 0 ; i < inputs.length ; i++) { var t = document.getElementById("mce_editor_"+i); if (t) { tinyMCE.execCommand('mceFocus', false, 'mce_editor_'+i); tinyMCE.triggerSave(true,true); } } parseDocument(); }

Zum Beispiel: beispiel-tinymce3.html. Neben solchen Brieffunktionen sind natürlich auch Antragsformulare, Bestellformulare und ähnliches denkbar.

Zusammenfassung
Durch den Einsatz eines WYSIWYG-Editors wie TinyMCE lassen sich in einfacher Weise Serienbriefe erzeugen. Der Anwender braucht keinen Source-Code zu editieren und kann wie von Office-Textverarbeitungen gewohnt seine Dokumente erstellen. Weitere denkbare Verbesserungen wären die Bereitstellung von Editier-Templates innerhalb des Editors durch den Einsatz des TinyMCE-Template-Plugins oder das Speichern der editierten Version auf dem Webserver.

Alternativ zu einem serverseitigen Speichern des Dokumentes kann man natürlich den veränderten Text auch in seiner Textverarbeitung mittels Copy und Paste speichern. Bei Verwendung des Internet Explorers bleiben dabei sogar die Formatieranweisungen erhalten. Download der Code-Beispiele: drweb-wysiwyg-serienbriefe.zip. Kommentare und Vorschläge zum Artikel bitte an den Autor .

Dr. Detlef Groth

Dr. Detlef Groth, von Beruf Biochemiker und IT-Konsultant, arbeitet als Bioinformatiker und Autor in Potsdam und Umgebung.

Ein Kommentar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.