The Magnolia 5 series uses CKEditor for rich-text editing. This page highlights the most important milestones of the CKEditor integration since Magnolia 5.0, as well as supported configuration options in the Rich text field definition.

 

CKEditor integration since Magnolia 5.0

VersionNotable changesJIRA ticket
Magnolia 5.0

initial CKEditor integration, replaces the FCKEditor module in Magnolia 4.5

-
Magnolia 5.2.2
  • enabled basic configuration options
  • enabled usage of custom config.js file
 MGNLUI-2403 - Getting issue details... STATUS
Magnolia 5.3.1
  • consolidated initialization of CKEditor in the browser
    (e.g. working with external plugins, running multiple editors)
 MGNLUI-3052 - Getting issue details... STATUS
Magnolia 5.3.4
  • enabled Magnolia plugins over JS configuration
  • provided Magnolia's default rich-text field configuration as a config.js file, as a starting to point to your customization.
 MGNLUI-3150 - Getting issue details... STATUS

 

Config overview

For the list of supported config options, along with example values, please head to the Rich text field documentation page.

 FCKEditor
Magnolia 4.5		CKEditor
Magnolia 5.0		CKEditor
Magnolia 5.2.2+

Outcome

Basic configuration
alignment(tick) (lightbulb)(error)(tick) (grey lightbulb)enables "justify" plugin

images

- images from dam

(tick) (grey lightbulb)(tick) (grey lightbulb)
always both images
and dam assets 		(tick) (grey lightbulb)enables "image" plugin
(error)enables fork of "filebrowser" plugin to invoke assets chooser
fileUpload(tick) (lightbulb)(error)(error)no more direct upload in CKEditor
lists(tick) (lightbulb)(error)(tick) (lightbulb)enables "enterkey", "indent" and "list" plugins (dependency chain for list)
source(tick) (grey lightbulb)(error)(tick) (grey lightbulb)enables "sourcearea" plugin
spellChecker(tick)(error)(error) 
showSpellChecker(tick) (lightbulb)(error)(error) 
tables(tick) (grey lightbulb)(error) always on(tick) (grey lightbulb)enables "table" and "tabletools" plugin
width(tick) 543--always 100% of parent Vaadin layout
height(tick) 200(error)(tick)sets height of Vaadin component
colors(tick)(error)(tick)sets "colorButton_colors" and "colorButton_enableMore" config options, enables "colorbutton" plugin, disables "colordialog" plugin
fonts(tick)(error)(tick)enables "font" and "fontSize" plugins, sets "font_names" config option, enables "Font" button
fontSizes(tick)(error)(tick)enables "font" and "fontSize" plugins, sets "fontSize_sizes" config option, enables "FontSize" button
enterMode(tick) undocumented-- 
shiftEnterMode(tick) undocumented-- 
Advanced configuration
configJsFile(tick)
called jsConfigFile		(error)(tick)sets "customConfig" config option
jsInitFile(tick)--no longer applies to CKEditor
css(tick)(error)(error)use custom config.js file, see "contentsCss"
styles(tick)(error)(error)use custom config.js file, see "stylesSet"
templates(tick)(error)(error)use custom config.js file

Definition vs. JS configuration

The set of config options that are offered by the RichTextFieldDefinition  is mostly intended for a quick and easy customization of the editor.

As soon as you have more advanced requirements, you may switch to a configJsFile.

(info) When using a configJsFile, all other definition options are ignored. This is intended because otherwise, they override any configuration done in the JS files.  

 

Alternate Java-based configuration

As of Magnolia 5.0, customizing the MagnoliaRichTextField can also be done the Java way, with the following steps:

  1. Create a new fieldType
    • set definitionClass, e.g. MyRichTextFieldDefinition
    • set factoryClass MyRichTextFieldFactory extending magnolia's RichTextFieldFactory
  2. Override #initializeCKEditorConfig()
    • Return a custom extended MagnoliaRichTextFieldConfig
    • this is our default config / impl of the Vaadin ckeditor wrapper add-on's CKEditorConfig
      • it exposes common CKEditor config / can also set options as plain Json strings
  3. Set some field class to MyRichTextFieldDefinition in any dialog definition

Although it is technically possible, it has the following limitations:

  • One has to implement a Java config class from the Vaadin wrapper + our own definition & factory classes to customize the appearance/feature set of the CKEditor.
    • Thus requiring changes in your module at every config change.
  • For each different configuration, one must register a new field type and create a field factory

 

Switching to CKEditor in Magnolia 4.5

The CKEditor Module for Magnolia 4.5 is available in the forge.

It is very similar to the legacy FCKEditor module; it simply provides the CKEditor 4.x library, and offers a set of config options.

(warning) Note that it is however totally independent from the CKEditor integration in Magnolia 5, and that we do not provide any automatic upgrade to Magnolia 5 for its usages (using only the config.js file is then your safest bet).

 

 

  • No labels

6 Comments

  1. Ryaan

    Any documentation around hooking up ckeditor to pull images from the DAM? 

    Currently have images selection enabled in my config.js - but it doesnt seem to point to the DAM... where would I define this? YAML? Or in the config.js?

    1. Richard Gange

      Hi Ryaan-

      It should be as easy as adding the "images" property to your config. Set it to "true". (See https://documentation.magnolia-cms.com/display/DOCS/Rich+text+field) I tested it out on our demo site and it worked ok for me.

      1. Ryaan

        Correct - but Im using a custom configuration for my ckeditor - Ive resolved the issuse. Was missing... 

        removePlugins = [];


        removePlugins.push("elementspath");
        removePlugins.push("filebrowser");
        config.removePlugins = removePlugins.join(",");
        config.extraPlugins = "magnolialink,magnoliaFileBrowser";
        config.baseFloatZIndex = 150;

        from my custom config (smile) 

         

        1. Richard Gange

          Oh right! If you use a custom js then everything must be configured through the file. Forgot that, sorry. Anyway thanks for your feedback.

  2. Peter Varga

    Hello Richard,

    We've found an issue with CKEditor integration. When inserting an image with default CKEditor command, on the second (Link) tab of the Image Properties dialog the Browse Server button links to the Assets chooser instead of the Pages chooser. Is there a way in the config to change this behaviour?

     

  3. Varshali

    Hi,

    I am using custom-config.js for hooking up ckeditor. In CKEditor I want my custom styles to be added. But it is showing all the plugins, styles which are in Magnolias config-magnolia.js.

    I am trying this in Blossom project with magnolia version 5.5.

    In MyownComponent.java I am writing :

    String configJsFile="webresources/ckeditor/custom-config.js";

    richText.definition().setConfigJsFile(configJsFile);

    I want simple CKeditor just like we are using for writing comments on this page with styles of my choice.

    What could be the issue?