Add font sizes options to TinyMCE editor

Question

What's the easiest way to add font sizes options to Plone 4's TinyMCE editor?

For some reason a client has this request.

In Site Setup - TinyMCE Visual Editor - Toolbar I can't see any option related to this feature.

This is how it looks in my application:

Answer 1

In /portal_tinymce/@@tinymce-controlpanel - Styles add definitions:

Font size 8|span|custom-font-size-8
Font size 9|span|custom-font-size-9
Font size 10|span|custom-font-size-10

etc. Meaning you can select the options Font size x in your editor. This will be saved as a span with class custom-font-size-x.

When you save this it will already work. But you need the styles to make this visible. I had an override to tinymce editor already set so I added the styles for each class like:

.custom-font-size-10 {
  font-size: 10px !important;
}

in content.css.dtml file. Also add this css in your theme to see the effect in view mode.