ActiveCollab Modules/Customization
View Cart
Close slide

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.

Thank you very much

This works out great for us.

full editor in ActiveCollab

Has this been validated with latest version (2.3.7) of AC?
Will it work with any 2.3 version?