🖼️ How to Enable Image Upload Inside the Rich Text Editor in Oracle APEX

1. Introduction

This article explains How to Enable Image Upload Inside the Rich Text Editor in Oracle APEX. The solution is implemented using a combination of Oracle APEX and JavaScript.

2. Tools and Technologies

To achieve the desired functionality, the following technologies are used:

• Oracle APEX
• JavaScript

3. Business Requirement

Users currently use the Rich Text Editor (RTE) in Oracle APEX to create formatted content, but they cannot insert or upload images directly. This limitation affects documentation quality, knowledge-base articles, announcements, and any content that requires visual elements.

This document outlines the steps required to implement Image Upload Inside the Rich Text Editor in Oracle APEX.

4. Implementation Steps

Step 1: Go to the Page Designer

Go to the Page designer where you want to create Rich Text Editor page item. Create new page item.

Step 2: Initialization JavaScript Function

On same page item, go to Initialization JavaScript Function and paste below Javascript code.

function(options) {
  options.editorOptions.extraPlugins = options.editorOptions.extraPlugins || [];
  options.editorOptions.extraPlugins.push(function MyCustomUploadAdapterPlugin(editor) {
    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
      return {
        upload() {
          return loader.file.then(file => {
            return new Promise((resolve, reject) => {
              const reader = new FileReader();
              reader.onload = () => {
                const base64 = reader.result;  
                resolve({ default: base64 });
              };
              reader.onerror = reject;
              reader.readAsDataURL(file);
            });
          });
        },
        abort() {
        }
      };
    };
  });

  let tb = options.editorOptions.toolbar || [];
  if (!tb.includes('uploadImage')) {
    tb.push('uploadImage');
  }
  options.editorOptions.toolbar = tb;

  return options;
}

Step 4: Save and Run the page

5. Output

Following the above steps, you can Enable Image Upload Inside the Rich Text Editor in Oracle APEX. This ensures a smoother and more user-friendly experience.

Thanks for reading! We hope this guide helped you to Enable Image Upload Inside the Rich Text Editor in Oracle APEX.