In this content editors guide, you will learn more about the Episerver rich text property. The rich text editor provides similar capabilities to an editor like Microsoft Word. This type of editor is known as a WYSIWYG (What you see is what you get) editor. It provides typography manipulation and styling. In the rich text editor, you can write, edit and format content however you want. Using the rich text editor, a content editor can even add custom fonts, styles, and images. This is why the rich text property is a lot more powerful compared to the text string. The simple string property only allows a content editor to add text with no styling.
The rich text editor property is also known as the XHtmlString. Instead of writing their own rich-text editor, Episerver uses a third-party product called TinyMCE. Most major CMS systems make use of TinyMCE including Umbraco, Sitecore and WordPress. This means there is a lot of information on how to use TinyMCE out there.
The good news is that the editor is pretty simple to use. If you ever get stuck using a feature, I recommend either checking out the TinyMCE documentation here, or, Googleing the issue and including the term 'TinyMCE' when you search. Doing this will mean you are a lot more likely to find a solution. You can tell when you are interacting with the rich text editor within the CMS as it will look like this:
By default, your editor should look pretty similar to the screenshot above. It is possible that your IT department has configured your website to either include or remove a few of the capabilities, so do not be panicked if your editor is a little different!
As of Episerver 11, the Rich text property was moved into its own NuGet package Episerver.CMS.TinyMCE. Out of the box Episerver ships with a number of additional TinyMCE plu-0ins. If you are a developer, you can see what plug-ins are included, following this technique:
Locate the
Episerver.CMS.TinyMCEpackage on your PCExtract this zip file
content\modules\_protected\EPiServer.Cms.TinyMceLook in
EPiServer.Cms.TinyMce.zip\2.0.0\ClientResources\tinymce\pluginsto find the plug-in folder
In here, you can see all the TinyMCE- plug-ins that ship with Episerver. As you will see, there are loads that you can enable and play around with. It is also possible to include other TinyMCE plug-ins in order to provide additional capabilities for your editors
That pretty much covers the basics of the TinyMCE editor. If you want to learn how to customise it, you can read this tutorial. Happy Coding 🤘
