Alias: Umbraco.TinyMCE
Returns: HTML
The Rich Text Editor (RTE) is based on tinymce and is highly configurable. Depending on the configuration, it will give your content editors more flexibility when working with content that should be more than only plain text.
Are you using custom configuration or plugins with TinyMCE?
In Umbraco 11 the TinyMCE version supported has been upgraded from version 4 to version 6. You need to migrate to the latest version if you are using TinyMCE plugins or custom configuration.
If your site is upgraded from an older version, follow the migration guides below to upgrade the TinyMCE version as well.
Customize everything from toolbar options to editor size to where pasted images are saved.
Use CSS to define specific editor styles and add them as formatting options of the Rich Text Editor.
Use Blocks to define specific parts which can be added as part of the markup of the Rich Text Editor.
Extend the functionality of the Rich Text Editor with plugins.
See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the Content Service.
The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.
Although the use of a GUID is preferable, you can also use the numeric ID to get the page:
If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:
It is possible to define specific styles and fonts for the Rich Text Editor (RTE). Once you have defined the styles, and enabled them on the RTE Data Type, the styles can be accessed directly in the Content section.
The RTE styles are created and managed in the Umbraco backoffice.
Find the Stylesheets folder in the Settings section.
Right-click the folder and select Create....
Choose New Rich Text Editor style sheet file.
Give the new stylesheet a name and Save it.
This will generate an empty CSS file in your project.
At this point, you can start adding specific styles, that your editors can then use in the Content section when creating and writing new content.
The image above is an example of how an RTE style can be configured. When working with these styles, the Preview feature will show you how the style will look when applied.
Every style you add, will automatically be added to the CSS file. The file will be placed in the same location as the rest of your CSS files. It is possible to edit the file directly from the backoffice as well. Access it from the Code tab in the top-right corner.
In order for your editors to be able to use the styles when working with content, two things needs to be done.
The styles will be accessed by the editors using the "Formats" dropdown in the toolbar of the RTE. In order the enable the dropdown, the "Style select" toolbar option needs to be checked.
This can be done by accessing the RTE Data Type directly from the "Info" tab on the Content. You can also find the RTE Data Type in the Settings section of the backoffice and make the changes from there. Learn more about the configuration options in the RTE Config article.
You can have as many different styles for your RTEs as you want. You might want to have different styles for different RTE Data Types.
When configuring your RTE Data Types, you can select which stylesheets your content editors should be able to use.
It is possible to insert Blocks into the markup of the Rich Text Editor (RTE). Once you've defined the Block Type as part of the RTE Data Type and enabled the Blocks Toolbar Option. Then Blocks can be created directly inside the Rich Text Editor.
The Block List property editor is configured in the same way as any standard property editor, via the Data Types admin interface.
To set up your Block List Editor property, create a new Data Type and select Block List from the list of available property editors.
Then you will see the configuration options for a Block List as shown below.
The Data Type editor allows you to configure the following properties:
Available Blocks - Here you will define the Block Types to be available for use in the property. Read more on how to set up Block Types below.
Blocks Live editing mode - Enabling this will make editing of a Block happen directly to the Rich Text Editor, making changes appear as you type.
Block Types are Element Types that need to be created before you can start configuring them as Block Types. This can be done either directly from the property editor setup process, or you can set them up beforehand. If they are set beforehand then they need to be added to the Rich Text Editor afterward.
Once you add an Element Type as a Block Type on your Rich Text Editor Data Type you will have options to configure it further.
Each Block has a set of properties that are optional to configure. They are described below.
By configuring the properties in the group you can customize the user experience for your content editors when they work with the blocks in the Content section.
Label - Define a label for the appearance of the Block in the editor. The label can use AngularJS template string syntax to display values of properties. Examples and more details about labels and AngularJS templates.
Display Inline with text - When turned on the Block Element will be able to stay in line with text or other elements. If not the Block will stay on its own line.
Custom view - Overwrite the AngularJS view for the block presentation in the Content editor. Use this to make a more visual presentation of the block or even make your own editing experience by adding your own AngularJS controller to the view.
Custom stylesheet - Pick your own stylesheet to be used for this block in the Content editor. By adding a stylesheet the styling of this block will become scoped. Meaning that backoffice styles are no longer present for the view of this block.
Overlay editor size - Set the size for the Content editor overlay for editing this block.
It is possible to use two separate Element Types for your Block Types. It's required to have one for Content and optional to add one for Settings.
Content model - This presents the Element Type used as a model for the content section of this Block. This cannot be changed, but you can open the Element Type to perform edits or view the properties available. Useful when writing your Label.
Settings model - Add a Settings section to your Block based on a given Element Type. When picked you can open the Element Type or choose to remove the settings section again.
These properties refer to how the Block is presented in the Block catalog when editors choose which Blocks to use for their content.
Background color - Define a background color to be displayed beneath the icon or thumbnail. Eg. #424242.
Icon Color - Change the color of the Element Type icon. Eg. #242424.
Thumbnail - Pick an image or Scalable Vector Graphics (SVG) file to replace the icon of this Block in the catalog.
The thumbnails for the catalog are presented in the format of 16:10, and we recommend a resolution of 400px width and 250px height.
These properties are relevant when you work with custom views.
Force hide content editor - If you made a custom view that enables you to edit the content part of a block and you are using default editing mode (not inline) you might want to hide the content editor from the block editor overlay.
To render Blocks in the frontend, you must create Partial Views for each Block.
The Partial Views must be:
Named by the alias of the Element Type that is being used as the Content Model for the Block.
Placed in the folder Views/Partials/RichText/Components/.
For example, if the Element Type alias of the Content Model is myBlockType, a Partial View must be created at Views/Partials/RichText/Components/MyBlockType.cshtml.
The Partial View will receive the model of Umbraco.Cms.Core.Models.Blocks.RichTextBlockItem. This gives you the option to access properties of the Content and Settings Models of your Block, as illustrated in the following sample:
If you use ModelsBuilder, you can specify the Content Model (and optionally the Settings Model) in the Partial View model. This allows for type-safe access to the Block data.
The following example shows a Partial View of a Block with MyBlockType as Content Model and MyBlockSettingsType as Settings Model:
Building Custom Views for Block representations in Backoffice is the same for all Block Editors. Read about building a Custom View for Blocks here
In this article you can learn about the various ways you can configure the RTE.
You have full control over which options should be available on the RTE.
In the examble above, all 34 options have been enabled. The options include copy/paste buttons, font styles like bold and italics, bullet lists and options to embed videos and insert images.
It is possible to define specific styles that can be used when editing content using the RTE. You can use as many of these styles with the RTE as you want.
Define height and width of the editor displayed in the content section.
Define the maximum size for images added through the Rich Text Editor.
If inserted images are larger than the dimensions defined here, the images will be resized automatically.
The Rich Text Editor comes in two different modes: Classic and Inline.
The default mode which displays the toolbar at the top.
In this mode the toolbar is hidden, and only shows up when content in the editor is highlighted.
Select the width of the link picker overlay. The overlay size comes in three sizes: Small, Medium, and Large.
When this option is checked the label and description for the RTE property will be hidden.
Some of the backoffice users might be restricted to a specific part of the content tree. When the "Ignore User Start Nodes" is checked, the users can pick any piece of content from the content tree, when adding internal links through the RTE.
Images added through the RTE is by default added to the root of the Media library.
Sometimes you might want to add the images to a specific folder. This folder can be configured using the "Image Upload Folder" setting.
The global configuration of RichTextEditor will be removed in Umbraco 14 to support more rich text editors in the future. Instead, a new extension type called “tinyMcePlugin” will be added.
The RTE can also accept advanced configuration through the appSettings.json file fed into the TinyMCE configuration. This is within Umbraco:CMS:RichTextEditor and allows you to configure the following:
CustomConfig is slightly different from the rest as it extends the core config passed into TinyMCE.
Sometimes you want to allow your content editors to be able to add <script> tags into the RTE. This tag is classed as invalid by default which means the configuration needs to be updated to allow it. This is not something that can be done through the CMS and requires advanced configuration in the appSettings.json file. It uses the ValidElements property to append ,script[*] to the pre-existing list of valid elements as shown below.
Information on how to work with TinyMCE plugins in the rich text editor.
The global configuration of TinyMCE will be removed in Umbraco 14 in order to support more rich text editors in the future. Instead, a new extension type called “tinyMcePlugin” will be added.
The Rich Text Editor (RTE) in Umbraco is based on the open source editor . TinyMCE is a highly customizable editor, and it is possible to extend the functionality of the editor by adding plugins.
TinyMCE comes with a lot of plugins out of the box, but it is also possible to create your own plugins. This article will show you how to add a custom plugin to the rich text editor.
TinyMCE has a lot of open-source plugins available. You can find a list of these plugins on the .
TinyMCE also has a number of available. These plugins are only available for .
To enable plugins in the rich text editor, you need to add it to the Plugins array in the of the rich text editor.
We have enabled the powerpaste plugin, and configured it to allow local images. It will prompt when pasting Word documents, but for HTML documents it will clean the HTML without prompting.
Load a custom plugin that gives you the ability to interact with the global tinymce editor object.
Here we are loading a custom plugin called myrteplugin and adding a button to the editor called myrtebutton. When the button is clicked, it will insert the text Hello World! into the editor.
The button must be added to the toolbar in the rich text editor configuration.
You can go to any Document Type that uses the rich text editor and click the button to insert the text Hello World! after.
The RTE styles are defined in CSS files which can be created in the Settings section. Read the article to learn more about this feature.
Blocks can be added as elements in the Rich Text Editor. Configuration and rendering of Blocks is described in the article.
Read more about the advanced configuration and how to set it up in Umbraco in the article.
The example above shows how to add the open-source to the rich text editor. The plugin is added to the Plugins array in the configuration. The plugin itself will be shown in the statusbar of the rich text editor, so the statusbar option is also added to the CustomConfig object.
To add a premium plugin, you need to add the plugin name to the Plugins array in the of the rich text editor. You also need to add the "" to the configuration.
See all the .
You can go to and sign up for a free trial. You will get a Cloud API key that you can use to try out the premium plugins.
If you want to create your own plugin, you should in general follow the . However, there are a few things you need to be aware of to load the plugin in Umbraco. See the example below.
