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

Question

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?

Answer 1

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.