How to customize the styles available in your Plone instance's TinyMCE editor

If you run Plone, you will have noticed that there is a small list of custom styles which appear in your page editor's formatting dropdown menu (the one that by default says Paragraph).

You can customize that, if you have a custom Plone theme — here are instructions for themes derived from Barceloneta.

Under your theme's styles folder, you'll create a file named tinymce-formats.css.  Any styles you define here will appear directly under the formatting menu, so add the styles you will be using most frequently here.

Now open your theme's theme.scss file.  At the very end, @import tinymce-formats.css.

Rebuild your theme's CSS files using the standard npm procedure documented by Barceloneta.

Open your theme's manifest.cfg file.  Under section [theme], you will add two keys, which I will show by example here:

# The following two uncommented lines should already be there.
# This includes your dev and prod CSS as per any Plone theme.
development-css = /++theme++rudd-o.com/++unique++724c73227ae85aea4c482b38a8f1ad00/styles/theme.css
production-css = /++theme++rudd-o.com/++unique++724c73227ae85aea4c482b38a8f1ad00/styles/theme.min.css
# This is the magic sauce.  The next line makes your theme's styles
# available inside TinyMCE.  The line after that populates the
# formatting dropdown menu in TinyMCE.
tinymce-content-css = /++theme++rudd-o.com/++unique++724c73227ae85aea4c482b38a8f1ad00/styles/theme.css
tinymce-styles-css = /++theme++rudd-o.com/++unique++724c73227ae85aea4c482b38a8f1ad00/styles/tinymce-formats.css

That's all!