X

Oracle Application Express
Tipps, Tricks und Best Practice

  • APEX
    December 13, 2017

So nutzen Sie den Rich Text Editor voll aus!

Carsten Czarski
Consulting Member of technical Staff

Das APEX Element Rich Text Editor erlaubt es, im Gegensatz zu einem normalen Textbereich, formatierten Text zu bearbeiten. Der Text wird dann als HTML-Code an Application Express gesendet und typischerweise auch als solcher in Tabellen abgelegt.

Das technische Fundament des Rich Text Editors ist die Javascript Bibliothek CKEditor. Zwar sind die im Page Designer angebotenen Konfigurationsmöglichkeiten recht überschaubar, doch bietet der CKEditor eine umfangreiche API zur Konfiguration an - und diese lässt sich ab Application Express 5.1 sehr leicht nutzen.

Navigieren Sie dazu, im Page Designer, zu Ihrem Rich Text Editor Element und dort zum Abschnitt Advanced. Das Attribute Initialization Javascript Code ist der Einstieg in die Konfigurationsmöglichkeiten des CKEditor. Typischerweise wird dort eine Funktion wie folgt hinterlegt.

function ( configObject ) {
    configObject.{attribute-name-1} = {attribute-value-1};
    configObject.{attribute-name-2} = {attribute-value-2};
    :
    return configObject;
}

 

Application Express ruft diese Funktion kurz vor der Initialisierung des Editors auf und übergibt das Standard-Konfigurations-Objekt. Dieses können Sie nun in Ihrem Javascript-Code verändern und an Application Express zurückgeben. Der CKEditor wird dann mit der von Ihnen veränderten Konfiguration initialisiert. Einen Überblick über die Möglichkeiten finden Sie in der API-Dokumentation des CKEditor.

Machen Sie ein paar erste Tests: Die folgende Javascript-Funktion setzt die Grundfarbe für den Editor auf eine Art Grün, und die Möglichkeit, die Größe des Editors zu verändern wird abgeschaltet. Danach starten Sie die Seite, um sich das Ergebnis anzusehen.

function ( configObject ) {
    configObject.uiColor        = "#AADC6E";
    configObject.resize_enabled = false;

    return configObject;
}

 

CKEditor bietet sehr viele Varianten an, wie das HTML generiert werden soll. So führt die Return-Taste standardmäßig dazu, dass mit einem <p> Tag ein neuer Absatz produziert wird.

Das kann geändert werden - es soll ein einfacher Zeilenumbruch mit dem Tag <br> erzeugt werden.

function ( configObject ) {
    configObject.enterMode      = 2;
    configObject.uiColor        = "#AADC6E";
    configObject.resize_enabled = false;

    return configObject;
}

Wem die von Application Express angebotenen Varianten der Toolbar nicht gefallen, kann sich eine eigene zusammenstellen.

function ( configObject ) {
    configObject.enterMode      = 2;
    configObject.uiColor        = "#AADC6E";
    configObject.resize_enabled = false;
    configObject.toolbar        = [
            ['Link','Unlink','Anchor'],
            ['Image','Table','HorizontalRule','Smiley','SpecialChar'],
            '/',
            ['Bold','Italic','Underline','Strike','-','Subscript','Superscript','-', 'RemoveFormat'],
            ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote']
        ];

    return configObject;
}

Die API-Dokumentation des CKEditor bietet noch viele weitere Einstellungsmöglichkeiten an. Am besten ist es sicherlich, sich dafür einmal etwas Zeit zu nehmen - als Ergebnis bekommt man einen Rich Text Editor nach Maß - in der APEX-Anwendung. Doch das ist noch nicht alles. Kombiniert man diese Konfigurationen geschickt mit zusätzlichen APEX-Seiten oder RESTful services, so lässt der Rich Text Editor sich sehr elegant mit einem Bilder-Upload versehen oder man kann ich "responsive" gestalten. Wie das geht, erfahren Sie im vollständigen Community Tipp.

 

 

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.