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.

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

How to

Includes 2 major steps in which you can choose between

  1. light-dev style or module development style for configJsFile update
  2. 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:

configJsFile.js

Configurations for tours app rich text field is here:

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

Module development style for configJsFile

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 step to your text field configuration

Text field configuration for new CKEditor toolbar

/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.

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

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 and have a good day!

  • 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.