How can I add a class to a table in TinyMCE for Umbraco 7 without using the source button?

css, tinymce, umbraco, umbraco7

Solution

There is a built-in function in Tiny MCE for this, but configuring it into Umbraco differs a little from the Tiny MCE out-of-the-box configuration.

To configure these values into Tiny MCE in Umbraco you need to add a `<config>` node to the `<customConfig>` node in Config\tinyMce.config.

The following is the stock config, but formatted to successfully make it through umbraco's dynamic evaluation:

  <config key="table_class_list">
     [
        {"title": "None", "value": ""},
        {"title": "Dog", "value": "dog"},
        {"title": "Cat", "value": "cat"}
     ]
  </config>

This will configure the class options as per the TinyMCE documentation.

Problem

In Umbraco 7, we want the ability to add a class to a table that has been inserted using TinyMCE, without having to use the `source` button in the editor. This is because it will be used by the client who is not tech-savvy. Anybody know if this is possible in a config setting anywhere?

Original source