Page tree
Skip to end of metadata
Go to start of metadata

Context

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.

How to

First make the buttons visible

By putting 'configJsFile.js' in your lightdev module such as

$~/support/magnolia-ee/mgnltc8/mgnltc8-webapp/src/main/webapp/modules/lightmodule1/webresources/js/configJsFile.js

Sample file here configJsFile.js

Then configure it in your text field for instance

/modules/tours/apps/tours/subApps/detail/editor/form/tabs/tour/fields/body@configJsFile=/.resources/lightmodule1/webresources/js/configJsFile.js

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

Verification screen



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

https://git.magnolia-cms.com/projects/PLATFORM/repos/ui.pub/browse/magnolia-ui-form/src/main/resources/VAADIN/js/filebrowser/plugin.js#53

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


2017-12-13 14:28:28,071 DEBUG info.magnolia.cms.filters.MgnlMainFilter : Handling URI: /mgnltc8-webapp/VAADIN/widgetsets/info.magnolia.widgetset.MagnoliaWidgetSet/ckeditor/skins/moono-lisa/dialog.css - Path info: null
2017-12-13 14:28:28,071 DEBUG info.magnolia.cms.filters.MgnlMainFilter : Handling URI: /mgnltc8-webapp/VAADIN/widgetsets/info.magnolia.widgetset.MagnoliaWidgetSet/ckeditor/plugins/image/dialogs/image.js - Path info: null
2017-12-13 14:28:28,188 DEBUG info.magnolia.cms.filters.MgnlMainFilter : Handling URI: /mgnltc8-webapp/VAADIN/widgetsets/info.magnolia.widgetset.MagnoliaWidgetSet/ckeditor/skins/moono-lisa/images/hidpi/close.png - Path info: null
2017-12-13 14:28:28,192 DEBUG info.magnolia.cms.filters.MgnlMainFilter : Handling URI: /mgnltc8-webapp/VAADIN/widgetsets/info.magnolia.widgetset.MagnoliaWidgetSet/ckeditor/skins/moono-lisa/images/hidpi/lock.png - Path info: null
2017-12-13 14:28:28,193 DEBUG info.magnolia.cms.filters.MgnlMainFilter : Handling URI: /mgnltc8-webapp/VAADIN/widgetsets/info.magnolia.widgetset.MagnoliaWidgetSet/ckeditor/skins/moono-lisa/images/hidpi/refresh.png - Path info: null


Note that in 'configJsFile.js' we removed the default 'filebrowser' and use our customized one


// DEFAULT CONFIGURATION FROM FIELD FACTORY
removePlugins.push("elementspath");
removePlugins.push("filebrowser");
config.removePlugins = removePlugins.join(",");
config.extraPlugins = "magnolialink,magnoliaFileBrowser";


Hope this helps!

  • No labels