As more and more end-users asked this additional features from our richtext editor such as image chooser and view source button. This article guide you through how to do it step by step with some additional insights on how it work from server side as of December 2017, when Magnolia CMS just released her major update 5.6.
Updated to use light development on modern Magnolia CMS. Also you can add some other items to your CKEditor toolbar such as text styles, paragraph format for headings, text color, etc. follow this guideline.
Overview of what we will do
Includes 2 major steps in which you can choose between
- light-dev style or module development style for configJsFile update
- text field configuration for new CKEditor toolbar
Light-dev style for configJsFile
Open our 'resources-app' under 'WEB DEV' group menu from our Admincentral
Create a new 'configJsFile.js' file under '/tours/webresources/js/' like below:
Copy and paste this file content to it:
Configurations for tours app rich text field is here:
Module development style for configJsFile
By putting 'configJsFile.js' in your lightdev module such as
Sample file here configJsFile.js
Then step to your text field configuration
Text field configuration for new CKEditor toolbar
Add or change 'images' and 'source' definition to true.
Here is how it look like in folder structure and editor view.
Note that you will find this line in configJsFile.js which is used for text styles, paragraph format for headings, text color, etc.
Verify the result
Here is how it work - insert image from server using browse server action
It would open up asset chooser dialog
What happen behind the scene
Here is what happen when we click on the 'Browser Server' button in image chooser dialog:
JS call is included in our plugin.js
The "pluginEvent:chooseAsset" request fired from browser to server
Here is how it looks like:
Here is a brief server call stack
In 'info.magnolia.ui.vaadin.richtext.MagnoliaRichTextField.changeVariables(Object, Map<String, Object>)'
The event from 'info.magnolia.dam.app.ui.field.factory.AssetsEnabledRichTextFieldFactory.createFieldComponent()' will be fired
Here is how it looks like, note that the overlay "ui-overlapping-ck-editor" CSS will be added:
Then Vaadin will take care of the remaining tasks as rendering the proper choose dialog similar to adding a link in 'chooseAsset()' function.
Here are couple of server debug logs printed out
Note that in 'configJsFile.js' we removed the default 'filebrowser' and use our customized one
Hope this helps and have a good day!