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:
- Load
tinymce
from CDN.Create a TinyMCE account and register with
tinymce
to obtain theapi-key
and replace the<no-api-key>
with yourapi-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:
Loadingtinymce
with theno-api-key
option will load the TinyMCE editor with a prompt asking to register the domain. - Initialize the
tinymce
instance for theField
that is of typelargetext
and set theField
object as value ineditor.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; } });