Editors

Editors are JavaScript files that allow you to create robust UIs for widget, document, and entity configuration menus in Admin. Editors leverage form controls and Ext.js to create menus. The following are examples of editors in action:

Widget Example

Editors are ideal for creating complex widget menus that you wouldn't otherwise be able to create using the typical method of specifying editViewFields in widget configuration.

How the Menu Looks in Site Builder

The Horizontal Rule widget displays a menu when you drop it onto a page in Site Builder. This menu allows you to make multiple style selections for the horizontal rule and also includes a color picker.

The Editor that Renders the Menu

The editor used to create this menu is located in the admin/editors directory, and you can also view it on Github.

How the Widget Specifies the Editor for Use

The widget specifies the use of the editor as part of its configuration data in theme.json. Within the widgets array, the widget declares the customEditor property, which then looks for the specified editor, without the .js extension, in the admin/editors directory:

"widgets": [
    {
        "defaultConfig": {
            "hrBorderColor": "#000",
            "hrBorderStyle": "solid",
            "hrBorderWidth": "1px",
            "hrMarginBottom": "0px",
            "hrMarginTop": "0px"
        },
        "displayName": "Horizontal Rule",
        "displayTemplate": "cms/horizontalrule",
        "customEditor": "horizontalrule",
        "icon": "/resources/admin/widgets/05_horizontal_divider.png",
        "id": "horizontal_rule",
        "validPageTypes": [
            "*"
        ]
    }
]

Content Example

In addition to creating menus for widgets, you can create menus for editing documents and entities within Admin. For example, within Admin you can edit the home document in the pages@mozu.com list: