Adding table controls and support to TinyMCE in WordPress
One thing wordpress has always lacked is the ability to handle tabular data. This is not because it can’t handle it, after all it’s only HTML, but the problem is that by default the setup does NOT include tablecontrols in it’s TinyMCE setup.
Here’s what you need to do to get table controls added into WordPress’s TinyMCE…
- Check your TinyMCE plugins to see if you have table support, they are found at “wp-includes/js/tinymce/plugins/tables/”, if you don’t…
- Download TinyMCE, to know which version to download, open /wp-includes/js/tinymce/tiny_mce.js and check this.majorVersion (it should say “2”).
- Visit the TinyMCE download site, and download the latest of the appropriate major version. (tinymce_2_1_3.zip)
- Extract the .zip and go to “tinymce\jscripts\tiny_mce\plugins\”, upload the “table” directory to “wp-includes/js/tinymce/plugins/”.
- Edit “wp-includes/js/tinymce/tiny_mce_config.php”
- FIND $plugins = array(‘inlinepopups’, ‘autosave’, ‘spellchecker’, ‘paste’, ‘wordpress’);
- UNDER ADD $plugins[]=’table’;
- FIND “, ‘wp_adv_end'” INLINE REPLACE WITH ” , ‘tablecontrols’, ‘wp_adv_end'”
Once this is done, login to the admin area, go to write or manage a post or page, you will find that in the visual editor there’s a button on the right, which if you hover your mouse over is entitled advanced options, clicks this and you will then be faced with another row, which contains the new table controls.
Enjoy!
Warning: Declaration of Social_Walker_Comment::start_lvl(&$output, $depth, $args) should be compatible with Walker_Comment::start_lvl(&$output, $depth = 0, $args = Array) in /Users/wade/Sites/hm2k.org/wp-content/plugins/social/lib/social/walker/comment.php on line 18
Warning: Declaration of Social_Walker_Comment::end_lvl(&$output, $depth, $args) should be compatible with Walker_Comment::end_lvl(&$output, $depth = 0, $args = Array) in /Users/wade/Sites/hm2k.org/wp-content/plugins/social/lib/social/walker/comment.php on line 42
[…] second method, which I found on hm2k.com is actually modifying WordPress’ default TinyCME install. TinyCME does support tables and […]
Great stuff, saved me a lot of poking around this.
Thanks!
I get it to work, but the table editor do not show the legends correctly. In stead of “Cols” and “Rows”, I get {#table_dlg.cols} and {#table_dlg.rows} – any solution to this?
Okay, I did the patch. The TinyMCE version in wordpress 2.6.2 (latest) is 3.1.1, but the version I downloaded from TinyMCE was 3.2. Now, in the WP page I am editing, I get the table buttons, but all of them are grayed out except the one for adding a table. So, I can add a table, but not adjust it, unless I do it in HTML.
Another problem is that the visual edit box is now extended over the Save and Publish buttons, rendering them inaccessible. I can switch to HTML mode, and then they are revealed.
What’s up with the grayed out boxes? Any help would be appreciated!
Rod
@Stian: see the comment on modifying the lang files here: http://www.allchorn.com/2008/09/19/how-to-implement-table-editing-in-wordpress/
@Rod: make sure you add the tablecontrols to the array named “$mce_buttons_3” NOT “$mce_buttons”. That puts the controls on a new row below the others, fixing the problem of buttons overlapping the Save and Publish area. I’m not sure about the grayed-out buttons problem; I haven’t experienced that.
I am attempting to follow these steps but it appears that something within WordPress 2.7 is blocking me or there is one other piece of code that needs to be added. I have tried the instructions above and the instructions on the link shown above as well. Anyone else having issues?
When I look for the file “wp-includes/js/tinymce/tiny_mce_config.php”, it is not there. Where do I go from here?
There is a good WordPress plugin out there that will give you all the features you need, including adding tables.
http://wordpress.org/extend/plugins/tinymce-advanced/
TemplateShack, your suggestion was very good. You get many advantages by using this plugin (E.g. disabling the foolish don’t-display-br-and-p-tags-in-HTML-view-thing). Thanks.