Dieses Dokument beschreibt, wie man den frei erhältlichen HTML-Text-Editor (WYSIWYG) in Apex-Anwendungen einbinden kann. Zwar bietet Application Express bereits Elemente vom Typ HTML-Editor an, diese funktionieren jedoch nicht in jedem Browser. FCKEditor steht auf http://www.fckeditor.net zum Download zur Verfügung.

Nachdem Sie den Editor heruntergeladen haben, entpacken Sie das Archiv am besten in das Verzeichnis auf dem Application Express Server, in welchem auch die Application Express-Bilder liegen (Alias /i/).

Navigieren Sie in Ihrer Apex-Anwendung zu den Gemeinsamen Komponenten und von dort aus zu den Shortcuts. Erstellen Sie dort nun einen neuen Shortcut INCLUDE_EDITOR_SCRIPTS vom Typ HTML Text:

<script type="text/javascript" src="#IMAGE_PREFIX#FCKeditor/fckeditor.js"></script>

Abbildung 1: Einrichten des Shortcuts INCLUDE_EDITOR_SCRIPTS

Erstellen Sie dann einen weiteren Shortcut EDITOR ebenfalls als HTML Text:

<script type="text/javascript">
 var #CURRENT_FORM_ELEMENT#FCKeditor = new FCKeditor('#CURRENT_ITEM_NAME#');
 #CURRENT_FORM_ELEMENT#FCKeditor.BasePath = '#IMAGE_PREFIX#FCKeditor/';
 #CURRENT_FORM_ELEMENT#FCKeditor.Height = 300;
 #CURRENT_FORM_ELEMENT#FCKeditor.Width = 500;
 #CURRENT_FORM_ELEMENT#FCKeditor.Config["AutoDetectLanguage"] = false;
 #CURRENT_FORM_ELEMENT#FCKeditor.Config["DefaultLanguage"] = "&BROWSER_LANGUAGE.";
 #CURRENT_FORM_ELEMENT#FCKeditor.ReplaceTextarea();
</script>

Erzeugen Sie nun eine Anwendungseite mit einem Formular und nehmen Sie ein Element vom Typ Textbereich in das Formular auf.

Abbildung 2: Formular mit Element vom Typ Textbereich

Navigieren Sie auf dieser Seite zu den Seitenattributen und nehmen Sie den Shortcut " INCLUDE_EDITOR_SCRIPTS" in den HTML Header auf.

Abbildung 3: Verwenden des Shortcuts "INCLUDE_EDITOR_SCRIPTS": Laden des Editors

Navigieren Sie nun zu den Einstellungen des Textbereichs - tragen Sie den vorhin erzeugten Shortcut EDITOR bei Text nach Element ein.

Abbildung 4: Verwenden des Shortcuts "EDITOR": Aktivieren des Editors

Starten Sie die Seite nun neu - Sie sollten anstelle des Textfeldes den HTML-Editor sehen.

Abbildung 5: Das Ergebnis

Wenn Ihnen die Toolbar zu mächtig ist, können Sie mit ...

 #CURRENT_FORM_ELEMENT#FCKeditor.ToolbarSet = "Basic";

... auch eine "schmalere" Variante nehmen.

Diese Lösung funktioniert einwandfrei, solange der HTML-Code, den der Editor erzeugt, nicht größer als 32 Kb wird. Bei mehr als 32Kb werden Sie eine Fehlermeldung bekommen - wie Sie damit umgehen, erfahren Sie in einer der nächsten Ausgaben.

Zurück zur Community-Seite