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.

Answer 2

A couple of possible solutions.

1. add a stylesheet property (right click on the stylesheet, hit create). Link the stylesheet to the datatype (in developer section). The styles defined on the stylesheet will be picked up by the styles dropdown.
2. Don't use tables, but create a structure in the tree. This allows you control the input and output of what you want to archive.