Don't miss out Virtual Happy Hour this Friday (April 26).

Try our conversational search powered by Generative AI!

Editing TinyMCE css styles

Vote:
 

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?

#79115
Dec 09, 2013 21:35
Vote:
 

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.

#79116
Dec 09, 2013 22:46
Vote:
 

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?

#79126
Dec 10, 2013 8:56
Vote:
 

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.

#79127
Dec 10, 2013 9:04
Vote:
 

Thank you Linus!

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

#79134
Dec 10, 2013 10:02
Vote:
 

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

#79137
Dec 10, 2013 10:08
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.