Image support for the Rich Text Editor

The case

In recent years APEX changed the technology behind the Rich Text Editor a couple of times; from CKEditor to TinyMCE and back to CKEditor. Initially this type of field allowed for the pasting of images which were converted to Base64 and thus could be stored as text in a CLOB. Strangely this option is now gone!?

Someone has submitted an idea on the APEX Ideas website to solve this and it is currently on the roadmap for a future release of APEX (see here). The latest reaction by and admin contains a link to a solution, but this will require quite a bit of work in my opinion. Especially considering CKEditor has the support needed.

A solution

Full disclosure: I didn’t actually come up with this myself ;-) I got this solution from a fellow APEX-developer who used this in a project he was working on. I immediately started using this in a project I’m working on as well.

So, now to the solution:

First of all, define a new item on your page of type Rich Text Editor and change some of the default settings. Change Format to “HTML”:

Modify the settings for the toolbar to your liking.

Then scroll down to Session State and change the Data Type to “CLOB”:

This setting is vital for this solution to work as images will be converted to Base64 which generally requires a lot of characters for which a VARCHAR2 will not suffice!

Now run your page and try to paste an image into your Rich Text Editor item. You will not be able to do so….

Go back to your APEX builder an navigate to the item you created before. Find the Initialization JavaScript Function in the advanced-section and paste the following code into it:

function (config) {

  function Base64UploadAdapterPlugin(editor) {
    class B64Adapter {
      constructor(loader) { this.loader = loader; }
      upload() {
        return this.loader.file.then(file => new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.onload = () => resolve({ default: reader.result }); // data:image/...;base64,...
          reader.onerror = reject;
          reader.readAsDataURL(file);
        }));
      }
      abort() { }
    }
    editor.plugins.get('FileRepository').createUploadAdapter = loader => new B64Adapter(loader);
  }

  if (!config.editorOptions.extraPlugins) {
    config.editorOptions.extraPlugins = [];
  }

  config.editorOptions.extraPlugins.push(Base64UploadAdapterPlugin);

  return config;
}

This will basically define a plugin named "Base64UploadAdapterPlugin” which is pushed into the editor when it’s initialised.

Save your changes and reload your page and try pasting an image again. This should now work!:

Also note the extra functions below the image to align your image and add subtext to it.

When you base the Rich Text Editor item on a CLOB column and make it part of a form, it will work out of the box and save and update your text with images flawlessly!

A few mumblings

The CKEditor can be modified quite extensively using the Initialization Javascript Function beyond what I did above. For example, it’s possible to redefine the toolbar to your specific needs, add Fonts or define your own context-menu for images! Perhaps I’ll do a blog on that in the future ;-)

In my solution I used the HTML format. It works for MarkDown as well, but the editor reacts a bit different when loading text with images, especially with regards to alignment. I’d say a bit more investigation is needed to get that to work as wanted.

As said before, I did not came up with this solution. Credits go to the developer who figured this out!

I don’t know what the APEX team will do for a future release, so perhaps this blog will be irrelevant quite soon.

(The above solution was made using Oracle APEX 24.x and might or might not work on other versions)