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

4 Comments

  1. I'm trying to add support for standard elements, such as h1, h2, h3, etc., as well as add some custom elements, such as our buttons, to the CKEditor.  It looks like the sample file (configJsFile.js) is not properly linked on this page, which would go a long way to helping me figure out what I'm doing wrong. Can someone fix that? (Viet Nguyen)

    1. Hello Nate Bartlett

      Could you please create a SUPPORT Jira ticket follow our supporting process at Magnolia here.

      By doing so we can follow up with your specific issue on your described environment, Magnolia version and things like that. Also we can provide you with a correct support resolution within a dedicated response time for you.

      Hope this helps and have a good day!

      1. Viet Nguyen ,

        Happy to put in a Jira ticket, if necessary. I was hoping to look over the sample configJsFile.js first, so that I could better understand the proper syntax and see what I was missing.  Do you need a Jira ticket to fix the link on this wiki?  If so, I will submit one.

  2. I've updated the link to the file. Should work now.