Custom Styles for TinyMCE

Last edited: 1/22/2020

Custom CSS can be used in conjunction with the TinyMCE content editor in the CMS. There are two advantages of doing this: one, to populate the TinyMCE "Style" dropdown with custom classes, and two, to apply visual styling to the WYSIWYG display, to more closely match the live site.

This is done by adding a file called editor.css to your site's media folder (as specified in the settings at Admin > File Transferring). The file can be added there directly via FTP.

Populating the Style dropdowns

Any classes you define in editor.css will be available in TinyMCE's Style dropdown as styles that can be applied to highlighted text. If you highlight an entire block level element, TinyMCE will add class="example" to the block level element. If you highlight a small portion of text, it will wrap the text with <span class="example">.

Applying visual style to the WYSIWYG display

Any elements you add styles to in editor.css will display using those styles in the TinyMCE display. If you are adapting editor.css from the site's stylesheet, be sure to leave out any parent selectors. For example, do not use:

#content h3 { color: salmon }

But rather use:

h3 { color: salmon }

Define your styles in the site CSS

Note that editor.css only styles TinyMCE. Any styles you define in editor.css must also be defined in your site templates to apply to your site.