Personalizing the editor for rich text fields

The editor toolbar is flexible and customizable. By default, the system uses different toolbar configurations for different types of content. This helps keep the interface clean. You can also modify the default toolbar sets or prepare your own custom sets.

Defining toolbar sets

You can either modify existing toolbar sets or create your own custom toolbar sets.

To define toolbar sets, edit the CMS\CMSAdminControls\CKeditor\config.js file within the administration project.

The following code sample shows a definition of the full toolbar set containing all available buttons. You can create custom toolbar sets by using names of the default buttons, or by adding buttons of custom CKEditor plugins.

config.toolbar_Full = [
    [sourceName, '-'],
    ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', 'Scayt', '-'],
    ['Undo', 'Redo', 'Find', 'Replace', 'RemoveFormat', '-'],
    ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-'],
    ['NumberedList', 'BulletedList', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv', '-'],
    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-'],
    '/',
    ['InsertLink', 'Unlink', 'Anchor', '-'],
    ['InsertImageOrMedia', 'QuicklyInsertImage', 'Table', 'HorizontalRule', 'SpecialChar', '-'],
    ['Styles', 'Format', 'Font', 'FontSize'],
    ['TextColor', 'BGColor', '-'],
    ['InsertMacro', '-'],
    ['Maximize', 'ShowBlocks']
];

Each toolbar set definition consists of several arrays representing toolbar groups. For example, the ['Styles', 'Format', 'Font', 'FontSize'] array represents a group of four buttons.

If you need to insert a line break between the button groups, use the '/' string.

If you want to define your own toolbar set, add a new configuration in the config.toolbar_ToolbarNameformat to config.js.

Adding fonts to the editor

If you wish to add fonts to the editor toolbar (for example culture-specific fonts), use the following process:

1. Edit the CMS\CMSAdminControls\CKeditor\config.js file.

2. Set the list of available fonts through the config.font_names property. For example:

   javascript

   Copy

   // Leaves the default set of fonts and adds 'Calibri' to the options
   config.font_names = 'Arial;Calibri;Comic Sans MS;Courier New;Georgia;Lucida Sans Unicode;Tahoma;Times New Roman;Trebuchet MS;Verdana';

3. Save the file.

After you sign in to the Xperience administration again, the new fonts appear in the editor's font list.

Configuring toolbars for page fields with the Rich text editor form control

To configure which toolbar is used to edit fields on structured pages (fields with the Rich text editor form control edited via the Content tab), set the field's Toolbar set property:

1. Open the Page types application.
2. Edit the page type you wish to configure.
3. Switch to the Fields tab and select a field with the Rich text editor form control.
4. Under Editing control settings, click Advanced.
5. Type the name of the toolbar set you wish to use when editing the field into Toolbar set.
6. (Optional) Specify a toolbar location in Toolbar location.
   • If not specified, the field is bound to a default toolbar at the top of the page.

Configuring visibility of editor buttons

You can use UI personalization to show or hide buttons from the integrated editor toolbar. Each button in the toolbar is represented by a UI element.

1. Open the UI personalization application.
2. On the Editor tab, select a site and a role.
3. Browse the UI element tree and select or clear the check boxes that represent the editor buttons.

The system automatically saves the settings as you select or clear check boxes in the UI element tree. The system hides the buttons (UI elements) that have their check box cleared for users in the selected role.

Using UI personalization for custom toolbar buttons

You can show or hide buttons from the integrated editor toolbar. Each button in the toolbar is represented by a UI element. The editor buttons are grouped into categories. Categories are represented by parent UI elements in the UI element tree.

If you want to display custom editor buttons based on UI personalization settings, you need to create matching UI elements:

1. Open the Modules application.
2. Edit the WYSIWYG editor module.
3. Switch to the User interface tab.
4. Navigate to the CMS -> Administration -> Configuration -> UI personalization -> Editor -> WYSIWYG Editor section of the UI element tree.
5. Create the required elements under the WYSIWYG Editor element (Click New element ).
   • The elements must be assigned to a custom module (you can use the default Custom module if you do not have a different custom module).
   • UI elements representing buttons must have the same Code name as the button name used in the toolbar definitions within the config.js file. This is case sensitive.

The system then uses the following process to display editor buttons:

1. Action buttons are loaded into each toolbar based on the toolbar definition.
2. If UI personalization is enabled, action buttons are filtered according to UI personalization settings of the user's roles.