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 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.
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 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. (6:39 minutes)
- Enter the required width and height of the editor (in pixels) in the Height and Width fields.
- 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.
- Drag and drop icons that you want available from the editor toolbar designer to and from the Inactive tools section.
- 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.
- Add an icon to the editor by dragging it from the Inactive tools section to the desired position in the toolbar designer.
- 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.
- 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 can also 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.
Some editor plug-ins are enabled 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.
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 can also apply custom changes for a specific page type.
When you apply a global setting to all properties based on the XHTML String (>255) property type, all the editors on the website using a global setting are based on this, unless otherwise stated that a editor should be based on another global setting or a custom setting.
- On the Page Type tab, select Edit Custom Property Types and click Add Setting.
- Enter a descriptive name for the global setting.
- Change the layout of the rich-text editor, configure the plug-ins, and click Save. The global setting appears in a list.
Click Set as Default for one setting to use it for all the editor toolbars on the website, unless another setting is chosen for the property in a certain page type. If you do not configure a global setting as default, the properties use the standard toolbar set at installation.
You can configure a global setting for a specific property on a specific page type.
- Open the page type for which you want to change the global settings on the Page Type tab in admin view.
- Click the property you want to configure and select the Custom Settings tab.
- Select the Use global settings check box and select Use default settings if you want to use the default settings for the property.
- Create a new global setting for the property by clicking Manage global settings.
- Add a global setting by following the instructions on how to Configuring global settings for the XHTML String (>255) property.
- Change the layout of the rich-text editor, configure the plug-ins, and click Save.
- Change the global setting in the drop-down list and click Save.
Use custom settings to change the layout and the buttons in the rich-text editor toolbar for this property on this page type only.
Configure a custom setting as follows:
- On the Custom Settings tab, select the Use custom settings radio button.
- Change the layout of the rich-text editor, configure the plug-ins and click Save.
To delete a global setting, open the setting and click Delete.