Adding a Rich Text editor

The Rich Text editor provides a text field and formatting toolbar that allows a content administrator to include formatted text and hyperlinks in a content item.

To add a Rich Text editor to a template:

  1. In typeInfo, insert a String element inside a @propertyType element.

  2. In defaultContentItem, specify the default value for the property as the content of the String element.

  3. Insert a corresponding editors/RichTextEditor element within editors/DefaultEditorPanel.

  4. Specify the propertyName attribute and any additional label attributes for the editor: 

    {
                "editor": "editors/RichTextEditor",
                "propertyName": "content",
                "label": "${property.content.label}",
                "enabled": true,
                "height": 200
            }

  5. Specify the toolbar configuration for the editor: 

    "toolbar": "[
                 { name: 'document',    items : [ 'Source'] },
                 { name: 'clipboard',   items : [ 'PasteText','PasteFromWord','-','Undo','Redo' ] },
                 { name: 'insert',      items : [ 'Table','HorizontalRule','SpecialChar'] },
                 { name: 'paragraph',   items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ] },
                 { name: 'links',       items : [ 'Link','Unlink','Anchor' ] },
                 '/',
                 { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript' ] },
                 { name: 'styles',      items : [ 'Styles','Format','Font','FontSize' ] },
                 { name: 'colors',      items : [ 'TextColor'] }         ]",

    Note

    The Rich Text editor is an implementation of the open source CKEditor WYSIWYG Rich Text editor. For more information about toolbar buttons and their functionality, see the documentation for version 4.x of the CKEditor at http://docs.ckeditor.com/#%21/guide/dev_toolbar.

The following shows an example of a template that includes a rich text editor: 

{
    "@description": "${template.description}",
    "@group": "MainContent",
    "ecr:createDate": "2016-09-12T17:33:58.681+05:30",
    "@thumbnailUrl": "thumbnail.png",
    "ecr:type": "template",
    "defaultContentItem": {
        "@name": "Rich Text",
        "content": ""    },
    "editorPanel": {
        "editor": "editors/DefaultEditorPanel",
        "children": [
            {
                "editor": "GroupLabel",
                "label": "${group.contents.label}"
            },
            {
                "toolbar": "[
                 { name: 'document',    items : [ 'Source'] },
                 { name: 'clipboard',   items : [ 'PasteText','PasteFromWord','-','Undo','Redo' ] },
                 { name: 'insert',      items : [ 'Table','HorizontalRule','SpecialChar'] },
                 { name: 'paragraph',   items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ] },
                 { name: 'links',       items : [ 'Link','Unlink','Anchor' ] },
                 '/',
                 { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript' ] },
                 { name: 'styles',      items : [ 'Styles','Format','Font','FontSize' ] },
                 { name: 'colors',      items : [ 'TextColor'] }         ]",
                "editor": "editors/RichTextEditor",
                "propertyName": "content",
                "label": "${property.content.label}",
                "enabled": true,
                "height": 200
            }
        ]
    },
    "typeInfo": {"content": {"@propertyType": "String"}}
}

Copyright © Legal Notices