Oracle Apex Resizing Rich Text Editor

on

 Requirement

Rich Text Editor should be as large as possible. But even with template attributes set to Stretched, Extra large, it isn't big.


Solution

Two pieces of code. Assuming your item is called P5_BODY_RICH:

1. Put this code into the JavaScript Initialization Code property of your Rich Text Editor item. 
This code will resize the item. Many other configuration options can be set as well, such as toolbars, colours etc. Take a look at this doc Class Config (CKEDITOR.config) - CKEditor 4 API docs


function ( configObject ) {
    configObject.width      = $( "#P5_BODY_RICH" ).closest(".t-Form-inputContainer").width() - 5;
    configObject.height     = 300;  // Specify your desired item height, in pixels
    configObject.resize_dir = 'vertical';
    return configObject;
}

2. In case the user resizes their browser you'll need a dynamic action to resize your rich text item as well. So this second piece of code goes in a Resize Dynamic Action.

You action is to Execute JavaScript Code and the code is this:
CKEDITOR.instances.P5_BODY_RICH.resize( $("#P5_BODY_RICH" ).closest( ".t-Form-inputContainer" ).width() -5 , 300);

The result is a nice large rich text editor that responds to browser resizing.



Acknowledgement

Let's Wreck This Together...with Oracle Application Express!: How do I create a responsive Rich Text Editor in Oracle APEX? (joelkallman.blogspot.com)





Comments

Post a Comment