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 XHTML String (>255) type.

Properties based on the XHTML String (>255) property type 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. See Episerver World and the official TinyMCE website for information.

You can adapt the rich-text editor to suit different groups of editors through the availability of different buttons. You also can change the size of the rich-text editor dialog. To change these settings, first configure the property to use property XHTML String (>255) type. 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.

You can watch the following demonstration video, Modifying the TinyMCE editor options. Click the title of the video to open it in a new browser window. (6:39 minutes)

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. If needed, change the path to the cascading style sheet (CSSCascading Style Sheet; a file type that defines the appearance and layout on the website, containing fonts, colors, and so on. CSS files separate the layout of website content from the content itself, making it easier to make layout changes on a website. (See also page template and page type.)) that is used in the editor with the Content CSS Path field.
  3. Drag and drop icons that you want 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 box. You also can turn on the word count in the editor, and specify if you want to use the Episerver CMS file selection dialog box. By default, the advanced image dialog box is used with the Episerver CMS file selection dialog box.

Enabling plug-ins

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

  • Change list buttons to advanced list buttons enables a drop-down list with advanced types for nested lists, such as 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 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 

Global settings let you change the layout and the buttons in the rich-text editor toolbar for a property. You can use global settings 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 to create an editor suitable for all editors working with the website. You also can apply custom changes for a specific page type.

back to top




Episerver User Guide 16-8 | Released: 2016-11-14 | © Episerver 2016 | Send feedback to us