Change Rich Text Editor UI
Last updated
Last updated
Umbraco 15 includes two options for rich text editing: Tiptap and TinyMCE. TinyMCE will eventually be phased out of the CMS.
This article will guide you through switching from TinyMCE UI to the new Tiptap UI.
The following steps will guide you through changing the property editor used for rich text on an existing Document Type.
The first step in this guide is to create a new Rich Text Editor Data Type using the Tiptap property editor.
As an alternative, you can create a new Data Type using the Tiptap property editor when updating the Document Type.
When swapping the UI used for the Rich Text Editor, you may need to reconfigure the toolbar.
Navigate to the Settings section of the Umbraco Backoffice.
Select + next to the Data Types folder.
Select New Data Type....
Give the new Data Type a name.
Click Select a property editor.
Choose Rich Text Editor [Tiptap].
Configure the Data Type to match your needs.
Save the Data Type.
Once you have prepared the new Data Type you need to update the Document Types that should use it.
Expand the Document Types folder.
Select a Document Type that needs to be updated.
Click on the Property used for rich text.
Hover over the selected property editor and click Change.
Search for the newly created Data Type and select it.
Submit the changes.
Save the Document Type.
Repeat steps 2-7 for each Document Type that needs to use the new Data Type.
When you have updated all the relevant Document Types, it is recommended to verify the content that uses the Rich Text Editor.
