Add OCM Image Picker and Link Dialog Plug-ins for Rich Text Editor

Oracle Content Management (OCM) provides image picker and link dialog features in the form of plug-ins for rich text editor, TinyMCE.

Note:

You may see OCM being referred to as Oracle Content Experience (OCE), the legacy name, in the code snippets.

To use TinyMCE for displaying large text field in a custom content form and have image and link functionality similar to a standard form, add these external plugins with some additional configuration. The plug-ins are compatible with TinyMCE version 6.3.1.

To add and configure the plug-ins:

1. Load tinymce from CDN.

   Create a TinyMCE account and register with tinymce to obtain the api-key and replace the <no-api-key> with your api-key in the URL.

   <!-- load TINYMCE from CDN-->
   <!-- obtain your own api-key for tinymce and replace the 'no-api-key'part of the url with your api-key-->
   <!-- Without actual api-key, tinymce editor will load with message prompting to register-->
   <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6.3.1/tinymce.min.js" referrerpolicy="origin"></script>
   

   Note:

   Loading tinymce with the no-api-key option will load the TinyMCE editor with a prompt asking to register the domain.
2. Initialize the tinymce instance for the Field that is of type largetext and set the Field object as value in editor.oceItemField

   tinymce.init({
       selector: '<dom-element-selector>',
       // list of plugins needed
       plugins: ['<plugin1>', '<plugin2>'],
       //load oce link and image plugins as external plugins
       external_plugins: {
         assetimage: '/documents/static/gemini/api/tinymce-plugins/assetimage.js',
         assetlink: '/documents/static/gemini/api/tinymce-plugins/assetlink.js',
       },
       // this property is important for the oce link plugin to work properly
       extended_valid_elements: 'a[*]',
       // other tinymce options
       // ....
       setup: function (editor) {
         editor = editor;
         // Note: set the current field in the editor
         // this must be set for the oce link and image plugins to work
         // this must be set for every tinymce editor instance.
         editor.oceItemField = field;
       }
   });