The Best Rich Text / HTML Editor for Oracle APEX

One of the first bigger public applications I built in Oracle APEX was the website and backend for a flight school (in 2006). It was a little Content Management System (CMS), so the secretary of the flight school could update the website and the trainers could create their online course material and exams straight from an administration page. I used a Rich Text (HTML) Editor, so they could make some text bold, include pictures, add some color and add tables to the text.

In many other applications, I started to use the Rich Text Editor so people could write their own emails and send them straight from their APEX apps. 

In the last 5 years, I didn't only come across the use of a Rich Text Editor in our own applications, but we saw that many people use it when they use APEX Office Print (AOP) to generate documents. AOP has the unique feature that it understands HTML and converts this to native Word/PDF styling. For example, the bold tag in HTML or the use of a span with a certain style is translated as real bold and, for example, that color in the generated document. People love it as they can make very dynamic documents.

Although we and many others are using the Rich Text Editor in our Oracle APEX apps, there were two things that were hard to do (read not native and you have to write extra code):

• dealing with over 32K of data
• upload, manipulate, and include images in the text 

As part of our Plug-ins Pro offering, we wanted to create the best Rich Text Editor (RTE) possible for Oracle APEX. So, a year ago, Bartosz and I did some research on what would be the best way to address this. We thought about enhancing the current RTE of APEX, but while doing the research we found the component was quite old (based on CKEditor 4 in APEX 20.1 and before). So we looked at many different RTEs, and ended up with our top 3:

• TinyMCE: an open-source editor, with which Bartosz had done a lot of work
• CKEditor: this is what is included in Oracle APEX. Before APEX 20.2 it was CKEditor 4, from 20.2 onwards the default one is CKEditor 5. The new editor is also open-source, looks nice but was still undergoing a lot of changes and enhancements, and wasn't backward compatible.
• Froala: used a lot by AOP customers, I have always been impressed by their offering, but it's paid.

They are all good, and although we needed to pay to use this editor in an APEX Plug-in and have the rights to distribute it without people needing to have their own license, we went with the Froala WYSIWYG Editor. 

And, I couldn't be happier with what Bartosz came up with and how easy it is now to use the RTE Editor.

Here's an animated gif to give you an idea of how it looks:

To implement a plug-in in your own app, you can follow this step-by-step guide, which will cover how to download the Oracle APEX plug-ins from the Plug-ins Pro website and import and register the plug-in.

In short, the steps to use the Rich Text Editor Pro plug-in in your own app are:

1. Login, download, and unzip the Rich Text Editor Pro plug-in from plug-ins-pro.com
2. Upload and run from SQL Workshop > SQL Scripts > ddl_unitedcodes_rich_text_editor_pro.sql and  ddl_unitedcodes_rich_text_editor_pro_sample_rest.sql
3. Import the Plug-ins in your app (the RTE Editor exists out of 3 plug-ins): Shared Components > Plug-ins > Import: dynamic_action_plugin_unitedcodes_froala_rte_da_conf.sql and item_type_plugin_unitedcodes_froala_rte.sql and process_type_plugin_unitedcodes_froala_rte_process.sql
   
   
   
   
4. Register the plug-in by going to SQL Workshop > SQL Commands and copy from the README.md file the script and enter your API key which you find in the Plug-ins Pro Portal
   
   
   

Now we are ready to use it in our application. I will use the Sample Database Application that comes with Oracle APEX, and change the Product description item on Page 6, which is a Textarea, to be the new Rich Text Editor Pro:

Edit page 6, click the P6_PRODUCT_DESCRIPTION item and:

- change the item type to be the United Codes Rich Text Editor Pro [Plug-in]

- give it a height of 300px

- change the Appearance - Template: Optional - Above

- change the Source - Form Region: - Select - 

The reason we unselect the Form Region and the item becomes Null is because Oracle APEX doesn't support more than 32K in an item. So we have to fill the item in another way. This is why the Rich Text Editor Pro comes with its own process which supports CLOBs and data over 32K.

We will add a Process by going to Pre-Rendering - After Header - Process - Right Click and Create Process. Call the process Fetch RTE and as Type select United Codes Rich Text Editor Pro (Process) [Plug-in]. The process supports three different ways of loading the CLOB value into the item: SQL Query, Function Returning CLOB, and Table. The most declarative one is the Table, so we will go with that. Select the item and fill in the columns:

In order to save the value back to the database, we also need a custom process, because of the same reason we had to fetch the value, to circumvent the 32K limit.

So, go to Processing - Processes - Right Click and Create Process which will add a new Process.

Move it after the Process Row process. Call the new process Process RTE and select as Type United Codes Rich Text Editor Pro (Process) [Plug-in]. The process supports two different ways of saving the item value into the CLOB column in the table: PL/SQL Code and Table. The most declarative one is the Table, so we will go with that. Select the item and fill in the columns:

That's it! 

Finally, I changed the height of the Modal to be 750px and changed the Labels of the other items to use the Floating template. When you open a product now, the result looks like this:

Now you can make the text bold, upload, drag-drop and manipulate pictures, add videos to the product description, etc. A plethora of options are now available through this new Rich Text Editor!

So our Rich Text Editor Pro exists out of 3 plug-ins: an item type plug-in, a process plug-in which we saw both being used above. But this plug-in also comes with a dynamic action plug-in. The dynamic action plug-in allows you to further customize the Rich Text Editor. Here are a couple of things you can do with the DA plug-in:

• ability to change the toolbar: add and remove buttons
• change settings: allow spell checker, copy/paste images, image resizing, configure the sticky toolbar
• enable/disable image as base64
• upload CLOB

You can customize the RTE editor also via JavaScript, but having this extra DA plug-in makes the life of a low-code developer easier 😀

To see the full power of this amazing plug-in, I strongly recommend installing the sample application that comes with it. You also find the sample application on the Plug-ins Pro website.