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.
First make the buttons visible
By putting 'configJsFile.js' in your lightdev module such as
Sample file here configJsFile.js
Then configure it in your text field for instance
Add or change 'images' and 'source' definition to true.
Here is how it look like in folder structure and editor view.
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!