Editing TinyMCE css styles


The styles drop down contains some unknown to me EPiServer CSS classes. It's unsure what they do and what they are for.

I want to add my own styles.

I've read documentation but it didn't leave me any wiser.

How can I add my own styles to be shown in TinyMCE?

Dec 09, 2013 21:35

Make sure you add one of your style sheets to the configuration for the editor (possible through several different ways as described in the documentation). Then add the "magical" EditMenuName: [title for editors] attribute to the css-classes you want to have visible to the editors. You can place a xpath syntax instead of a direct title if you want to translate the title. Check the Alloy templates for a sample.

Regarding the strange classes shown these are shown when Tiny MCE cannot find any other information on how to configure styles. For clarity, these have been removed in EPiServer so that only an empty list is shown if there are no configured styles.

Dec 09, 2013 22:46

Thank you Linus but I don't understand the different configuration options described in the documentation.

Could you give some examples on how to do the configuration for all editors?

Dec 10, 2013 8:56

If you take a look at the Alloy project it gives an example on how this can be done. There is a file names editor.css with the following content:

/* Styles used by the TinyMCE editor */

h2 {
EditMenuName: header2;

h3 {
EditMenuName: header3;

p.lead {
EditMenuName: introduction;

img.img-rounded {
EditMenuTitle: image;
EditMenuName: imagerounded;

img.img-polaroid {
EditMenuName: imagepolaroid;

If you search for the file name in the solution you find the following configuration in the episerver.config file:

<applicationSettings  uiEditorCssPaths="~/Static/css/combined.min.css, ~/Static/css/Editor.css" [more settings...] />

This basically says that the editor should load two files, one just to get the look and file of the site and one that provides styles to be used for the editor.

Another option would be to create a global setting for xhtml strings in the administrative views and define the setting there but defining it in the config makes it possible to have the setting under source control.

Dec 10, 2013 9:04

Thank you Linus!

Just a correction, it's <siteSettings /> and not <applicationSettings />.

Dec 10, 2013 10:02

Yes, applicationSettings is the name of the element in EPiServer 7.5 and siteSettings is of course the name in previous versions.

Dec 10, 2013 10:08