How to add table support in the text editor (tinyMCE)

Many requests have been made asking for adding table support in the text editor:

http://www.activecollab.com/forums/topic/6364/
http://www.activecollab.com/forums/topic/7530/
http://www.activecollab.com/forums/topic/5341/

But due to some unknown reason A51 never enabled table support comes with tinyMCE. Now, please allow me roll out an un-official way of enabling the long lost table button (bonus: font color picker button as well) in activeCollab's text editor.

1. Install the tinyMCE table plugin

Download the table plugin zip I pulled from official tinyMCE 3.4.1 repository. Extract/upload the table folder into /public/assets/javascript/tinymce/plugins

2. Edit /public/assets/javascript/tinymce/tiny_mce_init.js to enable the table button (as well as the font color picker button).

Step 1: add ",table" in the end of the plugins attribute.

Step 2: enable the buttons

In the theme_advanced_buttons1 attribute line, add forecolor and table into anywhere you like.

Step 3: allow tinyMCE to preserve table related html tags.

Add the following lines in the valid_elements attribute.
"-table[border=0|cellspacing|cellpadding|width|frame|rules|" +
"height|align|summary|bgcolor|background|bordercolor|style],-tr[rowspan|width|" +
"height|align|valign|bgcolor|background|bordercolor|style],tbody,thead,tfoot," +
"#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor" +
"|scope|style],#th[colspan|rowspan|width|height|align|valign|scope|style]," +

3. Edit global.css to remove border resetter

At this point you should be able to add/edit table. But when you display a table, you will find the table border isn't there. That's because activeCollab's global.css removes all borders inside a table. We need to get these back.

Edit /public/assets/stylesheets/global.css and remove the following line.

So it will look like this

4. Bingo! Clear your browser cache and start use your fresh-new editor.