Search code examples
tinymceoracle-apex

Is there a way to modify the Rich Text Editor toolbar in an apex application when the editor is in a column inside an interactive grid?


I am currently working on an Apex application. I have added the rich text editor per request of the user to both Interactive Grid columns and to a Form. I can modify the editor toolbar when it is in a form. But when trying the same inside a column in an interactive grid the changes are ignored. The library used is the default TinyMCE. The apex version is 23.2.3.

When using a form, in the "Initialization JavaScript Function" I put this which works perfectly, the user gets the buttons that they want.

function(options){
    options.editorOptions.toolbar = "styles bold italic underline link bullist numlist indent outdent undo redo";
    return options;
}

Now the problem arises when I put the same code in the "Initialization JavaScript Function" for a column that is defined as a Rich Text Editor. I didn't change any other setup after changing it to Rich Text Editor.

When I try to edit the contents the editor appears but the default buttons appear. There is no error. It simply ignores that initialization. I also tried to add it in the "Initialization JavaScript Function" of the report but that didn't work(as I assumed). So now I am at a loss. Is it possible to modify the toolbar icons when the Rich Text Editor is in a column?


Solution

  • What you experience seems to me a bug in APEX. You can try to workaround like this: Have your initialization function in place for your IG Rich Text column under 'Initialization JavaScript Function'. Run your page. Use Ctrl-U/'View page source' as to open the page source in a new browser tab. Look for a construct like this:

    apex.WebComponent._registerInitFunc( {
    elementId: "6998024218672516",
    func: function(options){
        options.editorOptions.toolbar = "styles bold italic underline link bullist numlist indent outdent ";
        return options;
    }
    } );
    

    Take the value of the elementId (6998024218672516 in above example) and put that as the staticId of your IG Rich Text column. Save the page in designer. Rerun your page and see..

    So the problem in APEX is, it is registering the initialization function under the element internalId, but it is searching for the initialization function using the staticId, which by default will not match. It should register under the staticId. If no staticId is given by the developer, the staticId is 'C'+internalId (like C6998024218672516).