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 |
---|---|
|
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. |
|
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 /stories-app/apps/stories.yaml
|
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