tinymce 4 custom classes for users to use

Question

How can I add custom classes to tinymce 4? I want to have a select in where users can select a class to use on their text. I don't want to use the standard plugins like forecolor, because I want to give certain classes that my users can use.

Short example:

tinymce editor "select class" (button in the toolbar)

• Red
• Blue
• Green

my_custom_css.css

.red { color: red; }
.blue { color: blue; }
.green { color: green; }

Answer 1

You can use the style_formats configuration option for this. The TinyMCE documentation provides all information you need: http://www.tinymce.com/wiki.php/Configuration:style_formats

The styles specified in that option will appear in a dropdown menu and can be applied as inline styles as well as classes. If you choose to apply classes to the selected elements, you'll probably like to include a custom stylesheet for the editor's content using the content_css option.

In your example, the respective part of the configuration would look like this:

tinymce.init({
    ...
    style_formats: [
        {title: 'Red', inline: 'span', classes: 'red'},
        {title: 'Green', inline: 'span', classes: 'green'},
        {title: 'Blue', inline: 'span', classes: 'blue'}
    ],
    content_css: 'my_custom_css.css'
});