how to add classes to the dropdown menu in the TinyMCE table editor

Question

All,

I am working on a Django application that uses the TinyMCE editor and the tables plugin for TinyMCE. Users have requested custom table classes (let's say some should be red and others should be blue).

This is easy enough to do in CSS. And I can override the HTML to do this. But there is a combobox in the TinyMCE table editor dialog box that says "class" and if I type something into this it shows up in the class attribute of the table.

My question is how can I have custom classes automatically appear in that combobox?

I've noticed that the table plugin's init() function has the line

 addClassesToList('class', "table_styles");

But I can't work out where "table_styles" are defined.

Any suggestions?

P.S.

I've seen in the documentation that I can just pass "table_styles" to the init() function. However, that function doesn't seem to ever explicitly get called. Is there a way I can add this dynamically?

Answer 1

in tables.js add the following code:

 function init() {
   settings = tinyMCE.settings;       
   settings["table_styles"] =  "make stuff red=red;make stuff blue=blue;" + settings["table_styles"];
   tinyMCE.settings["table_styles"] = settings["table_styles"];