X

The Oracle APEX blog is your source for APEX news, technical tips and strategic direction

  • December 13, 2017

How to fully leverage the Rich Text Editor

Carsten Czarski
Consulting Member of technical Staff

The Rich Text Editor item in Application Express allows to edit formatted text - unlike the simple textarea item which just allows to work with plain ASCII text. The rich text editor generates the formatted text as HTML code and sends that to Application Express on page submit. Most applications then simply store that HTML text into a database table.

The rich text editor is based on the Javascript CKEditor library. Page Designer does not offer too much configuration options, but the CKEditor library offers a huge variety of configuration options. And Application Express 5.1 makes such advanced configurations very easy.

 

In Page Designer, navigate to the settings of your Rich Text editor item and look up the Advanced section. The attribute Initialization Javascript Code is your entry to leverage the configuration options of CKEditor. A typical example for such a Javascript initialization function is as follows.

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

 

Application Express will call your function just before the editor is being initialized, passing in a Javascript object with the default configuration. In your code, that object is being changed and finally returned to Application Express. The Rich Text editor will then actually be initialized with the changed configuration object. To get an impression what this configuration object can do, have a look into CKEditor's API documentation.

Let's start with a few simple tests. The following Javascript function will set the editor's base color to green and we'll disable the resizing capability, so end users won't be able to resize the editor any more. After saving the function, reload the page to see the effects.

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

    return configObject;
}

CKEditor offers many tweaks to control, how the actual HTML code will be generated from user inputs. For instance, hitting the Return key by default produces a new paragraph with the <p> HTML Tag.

We can change that - now we want to have the editor produce simple line feeds using the <br> HTML Tag.

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

    return configObject;
}

If you don't like the toolbar options which are provided by Application Express, simply configure your own set of options.

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;
}

In CKEditor's API documentation you'll find much more attributes and explanations how these work. It's advisable to invest some time into this - at the end of the day you'll be able to get a Rich Text editor as your application requires it. All functionality can be leveraged. But there is much more than this: when combining this elegantly with other APEX pages, dynamic actions or REST services, we can extend the editor with things like an image upload capability, we can make is responsive and much more. To learn about this, read the full community article here.