29. Mai 2012

Einsatz des TinyMCE Editors in einer Web Dynpro / BSP Anwendung

In diesem Blogbeitrag möchte ich gerne meine Erfahrungen aus einem Kundenprojekt mit dem "What you see is what you get Editor" TinyMCE vorstellen. Im Rahmen dieses Kundenprojektes sollte eine Möglichkeit geschaffen werden, Briefe unabhängig von Word mit einem HTML-Editor bearbeiten zu können. Hierfür wurde TinyMCE genutzt.

Der Wunsch unseres Kunden ist es, unabhängig von einer Word-Installation eine in die WebDynpro Oberfläche integrierte Textverarbeitung zu ermöglichen und die wesentlichen Funktionen von Word, wie unterschiedliche Formatierungen, Tabellen oder Absätze nutzen zu können. Mit dieser Applikation sollen Briefvorlagen aus dem SAP System bearbeitet, gedruckt, gemailt und wieder abgespeichert werden. Neben der Möglichkeit, die Vorlagen allgemeingültig zu speichern können individuell veränderte Briefe beispielsweise zu einem konkreten Mitarbeiter gespeichert, aufgerufen und bearbeitet werden.

TinyMCE

TinyMCE ist ein unter LGPL-Lizenz frei verfügbarer JavaScript basierender HTML Editor. Der Editor bietet die unterschiedlichsten Möglichkeiten für die Textverarbeitung und liefert daraus basierend den Text mit den Bearbeitungen, wie Textformatierungen oder Tabellen, im HTML-Format.

TinyMCE – JavaScript HTML Editor

Neben den direkt verfügbaren Funktionen kann der TinyMCE Editor an die entsprechenden Anforderungen angepasst werden:

Anforderungen anpassen

An dieser Stelle wurde für Serienbriefe ein Drop-Down-Menü eingefügt. Die Inhalte des Drop-Down Menüs sind Kundenabhängig und werden beim Starten der Anwendung vom SAP System als JSON (JavaScript Object Notation) übergeben.

Erweiterungen des TinyMCE können sehr einfach mittels coding realisiert werden. Hierzu wird dem Entwickler eine entsprechende Dokumentation mit Beispielen zur Verfügung gestellt.:

Code-Beispiel

Das folgende Code-Beispiel zeigt hierbei, wie ein eigenes Drop-Down Feld eingebunden werden kann:

Einbindung WebDynpro ABAP Anwendung

Um den TinyMCE Editor in einer WebDynpro Anwendung nutzen zu können kann der Editor in einer BSP-Applikation eingebunden werden. Hierzu können die benötigten Dateien des TinyMCE als Mime-Objekte importiert werden.

TinyMCE Editor in einer WebDynpro Anwendung

In der BSP Applikation wird ein Textfeld definiert. Dieses Textfeld wird anschließend die Funktionen des Editors zur Verfügung stellen.

Der eigentliche Editor hingegen wird durch die folgenden Zeilen in die BSP-Applikation integriert. Hierbei wurde der TinyMCE mit JQuery genutzt, um mittels JSON Daten aus dem SAP System verfügbar zu machen.

JSON Daten aus dem SAP System

Abschluss der TinyMCE Einbindung

Durch diese wenigen Schritte stehen anschließend in einer Webdynpro Anwendung die Funktionen des TinyMCE zur Verfügung. Der eingegebene bzw. veränderte Text kann nun einfach in eine PDF-Datei umgewandelt und gedruckt/gemailt werden oder wieder im SAP System abgelegt werden.

Der TinyMCE stellt somit eine einfache Möglichkeit dar, unabhängig der Installation eines Textverarbeitungsprogramms wie Word, Texte zu bearbeiten. Der Funktionsumfang sowie das Handling des Editors bieten ebenfalls ausreichend Möglichkeiten, um Texte zu bearbeiten.

Durch die Möglichkeit der Anpassung, kann die Oberfläche an spezifische Wünsche und Anforderungen angepasst werden und fehlende Funktionalität durch wenige Anpassungen ergänzt werden. Außerdem kann das ausgegebene HTML Format beeinflusst werden, wodurch unterschiedliche Möglichkeiten durch SAP Druckprogramme, zum Druck zur Verfügung stehen.

In meinem nächsten Blogbeitrag möchte ich gerne aufbauend hierzu zeigen, wie Daten vom SAP System für den TinyMCE mittels JSON verfügbar sind.