CMS for administrators > Properties > Configuring the rich-text editor

Configuring the rich-text editor

This topic is intended for administrators and developers with administration access rights in Episerver.

The editor in Episerver CMS is configured on the Page Type tab, by selecting a page type and either adding or updating a property of the type ”XHTML String (>255)”.

Properties based on property type ”XHTML String (>255)” result in a rich-text HTML editor, which you can configure by choosing which buttons are available. In a standard installation of Episerver CMS, the editor is a customized version of the open source rich-text editor TinyMCE. TinyMCE has many functions, is easy for developers to customize, and works with all browsers supported by Episerver CMS.

This description applies to a standard installation of Episerver CMS, with a selection of functions being available. You can incorporate additional functions and customizations into the editor from admin view. Refer to Episerver World and the official TinyMCE website for more information.

You can adapt the rich-text editor to suit different groups of editors through the availability of different buttons. You can also change the size of the rich-text editor dialog. To change these settings, first configure the property to use property type ”XHTML String (>255)”. This enables the fields in the Custom Settings tab.

You use two kinds of settings to change the editor's layout and buttons: global settings and custom settings. You configure the layout of the editor toolbar the same way regardless of the type of setting.

Changing the layout of the editor

  1. Enter the required width and height of the editor (in pixels) in the Height and Width fields.
  2. The Content CSS Path field contains the path to the cascading style sheet that is used in the editor.
  3. Configure the layout of the editor by dragging and dropping icons that you want to be available from the editor toolbar designer to and from the Inactive tools section.
  4. Remove an icon by dragging it from the toolbar designer and dropping it in the Inactive tools section. The icon is automatically placed in the category to which it belongs.
  5. Add an icon to the editor by dragging it from the Inactive tools section to the desired position in the toolbar designer.
  6. Add and remove rows from the editor by clicking Add Row and Remove Last Row. The easiest way to clear all the icons from the toolbar designer and start from scratch is by clicking Clear Rows.
  7. Configure the editor plug-ins and click Save.

In the lower part of the Create New/Edit Property dialog, you can choose whether to use an advanced image or link dialog. You can also turn on the word count in the editor, and specify if you want to use the Episerver CMS file selection dialog. By default, the advanced image dialog is used as well as the Episerver CMS file selection dialog.

Enabling plug-ins

Some editor plug-ins are always enabled in a standard installation of Episerver CMS. These are configured in the Plug-in Manager on the Config tab in admin mode.

  • Change list buttons to advanced list buttons enables a drop-down list with advanced types for nested lists, for example, square, lower alpha, and lower roman.
  • Change image dialog to Advanced image dialog enables an advanced Add/Edit Image dialog box. Select this check box to make it possible to configure advanced properties for your images.
  • Word count enables word count functionality. Select this option to add a Words field to the bottom right of the editor. This displays the number of words included in the editor area.

Configuring global and custom settings 

Use global settings to change the layout and the buttons in the rich-text editor toolbar for a property. Global settings can be used on all page types as a default, or on only one page type. You can have as many global settings as you like on your website, making it possible to create an editor suitable for all editors working with the website. You can also apply custom changes for a specific page type.

back to top

Episerver User Guide update 15-5 | Released: 2015-11-16 | Copyright © Episerver AB | Send feedback to us