Light rich text field

info.magnolia.editor.field.LightRichTextFieldDefinition is a special type of rich text field provided by the Content Editor module.

The field can only be used as a content block element in a custom content editor.

Compared to the rich text field, the text formatting functions and configuration options of the light rich text field are limited.

A light rich text field
A full-featured rich text field

Example definition

From a block definition in the Content Editor module (/content-editor/blocks/text.yaml).

templateId: content-editor:blocks/text
icon: text-block
label: Text
block:
  implementationClass: info.magnolia.editor.field.LightRichTextFormView
  properties:
    text:
      class: info.magnolia.editor.field.LightRichTextFieldDefinition
      linkableApps:
        - pages-app
        - dam-chooser

Field properties

Property Description

Property	Description
`linkableApps`	required List of Magnolia apps which the editor may choose from for linking of a text element in the field with a Magnolia content item. The apps configured will be displayed in a separate choose dialog.
`configJsFile`	optional Location of a custom configuration file. For more details, see the section Customization below.

linkableApps

required

List of Magnolia apps which the editor may choose from for linking of a text element in the field with a Magnolia content item. The apps configured will be displayed in a separate choose dialog.

configJsFile

optional

Location of a custom configuration file.

For more details, see the section Customization below.

In the pre-5 UI versions of the Content Editor module (versions 1.3.x), the linkableApps definition was part of the contentDefinition in the configuration of the Stories app. The names of the linkable apps were also different: pages and assets (5 UI apps) versus pages-app and dam-chooser (6 UI apps, Content Editor 2.x).

/stories-app/apps/stories.yaml

icon: icon-stories-app
appClass: info.magnolia.ui.contentapp.ContentApp
class: info.magnolia.ui.contentapp.contenttypes.ConfiguredContentTypeAppDescriptor
contentType: story
subApps:
  browser:
...
  editor:
...
    contentDefinition:
...
      linkableApps:
        - pages
        - assets

Customization

Since version 2.0.2 of the Content Editor module, you can customize the field by modifying the associated JavaScript configuration file. For example, you can:

Adjust the color of the field’s UI.
Toggle the typing direction.
Enable the CKEditor-native spellchecker.

You can find an overview of all options on the CKEditor customization page, including Magnolia-specific settings and plug-ins.

Example customization

Open the Resource files app and for convenience, create a folder called ckeditor for the new custom configuration.
In the folder, create a new file called custom-config.js.

Add the following configuration code to the file and save it.

CKEDITOR.editorConfig = function( config ) {
    config.allowedContent = true;
    config.startupFocus = true;
    config.enterMode = CKEDITOR.ENTER_P;

    config.plugins = 'basicstyles,link,sharedspace,sourcedialog,toolbar,dialog,contextmenu';
    config.extraPlugins = 'format_buttons,sharedspace,sourcedialog,onchange,mgnlWorkspaceLink';

    config.skin = 'moono-lisa';
    config.sharedSpaces = {
        top: 'toolbar-container'
    };

    config.toolbarGroups = [
        { name: 'basicstyles', groups: [ 'basicstyles'] },
        { name: 'heading_formats', groups: [/*nothing to put here - all the buttons are injected directly by the plugin and this seems to be the way to do it*/] },
        { name: 'links', groups: [ 'links' ] }
    ];

    config.removeButtons = 'Underline,Subscript,Strike,Superscript,Styles,Anchor';
    config.removeDialogTabs = 'image:advanced;link:advanced';

    config.uiColor = '#AADC6E';
    config.contentsLangDirection = 'rtl';
    config.disableNativeSpellChecker = false;
};

In the definition of your text block, use the configJsFile property to reference the new configuration file.

templateId: content-editor:blocks/text
icon: text-block
block:
  implementationClass: info.magnolia.editor.field.LightRichTextFormView
  properties:
    text:
      class: info.magnolia.editor.field.LightRichTextFieldDefinition
      linkableApps:
        - pages-app
        - dam-chooser
      configJsFile: /.resources/ckeditor/custom-config.js

Light rich text field

Example definition

Field properties

Customization

Example customization

Location

Main doc sections