Blog about tips & tricks for CMS enhancement

eric.petersson

Configure custom TinyMCE settings in Umbraco 8


Setting up a custom TinyMCE style format selector in Umbraco 8 is pretty straightforward, yet here it is if you feel like you havn't got a hang of it. We will look into getting the Format selections to get us some own elements, such as headlines (h1, h2...) into working. This approach could also be used to narrow down to specific styles for different TinyMCE configurations.

1. Create Custom Stylesheet

Go to the Settings section in the backoffice and scroll down to the Template section. Click the  Stylesheets folder and create a New Rich Text Editor style sheet file.

This will make it available to you to create a custom style format. Enter a Name/headline for the format, give it a HTML-selector tag and apply a custom set of styles in CSS. You can see the image below how I made my variant.

Custom stylesheet for style formats in Umbraco 8

Once you've hit the Submit and Save button in the stylesheet creation in the Umbraco backoffice, the style will be available in your web solution's project structure beneath /css/yourNamingConvention.css. If you can't see expand and show all hidden files in Visual Studio.

2. Configure Custom Data Type with the styles

Next, head to the Settings section and collapse the Data Types folder and create a new Data Type that uses the Rich Text Editor. Make sure you tick the Style select checkbox, which will render our different styles and the Stylesheets section with the custom TinyMCE configuration you created earlier.

3. Assign the Data Type to a Document Type

Take the newly created Data Type and assign it as a Property for one of your Document Types. In my example below, I will assign it to a data holder called ArticlePage, responsible for structuring the data for creating articles for a customer's site.

4. Create content

Last, but not least, create some content for you Document Type in the Umbraco CMS tree. Expand the Formats dropdown in your TinyMCE control and you will find the style formats created in the first section of this blog post.

Sometimes the render of creating the content below of the stylesheets may end up in a 404 reference for finding the stylesheets. Try a better naming convention, such as avoiding spaces, inregular formatting and letters.