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…

  1. 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…
    1. Download TinyMCE, to know which version to download, open /wp-includes/js/tinymce/tiny_mce.js and check this.majorVersion (it should say “2″).
    2. Visit the TinyMCE download site, and download the latest of the appropriate major version. (tinymce_2_1_3.zip)
    3. Extract the .zip and go to “tinymce\jscripts\tiny_mce\plugins\”, upload the “table” directory to “wp-includes/js/tinymce/plugins/”.
  2. Edit “wp-includes/js/tinymce/tiny_mce_config.php”
    1. FIND $plugins = array(‘inlinepopups’, ‘autosave’, ’spellchecker’, ‘paste’, ‘wordpress’);
    2. UNDER ADD $plugins[]=’table’;
    3. 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!

Related posts:

  1. 10 wordpress performance optimisation tips I wanted to prepare my wordpress powered blog for an...
  2. Using Your Own URL as Your OpenID with WordPress Today I decided to join stackoverflow.com, which requires you to...
  3. Adding fonts into photoshop without adding them to windows If you use Photoshop for any kind of graphic or...
  4. suPHP and .phps PHP code highlighting support Today a user on one of my web servers asked...

9 Comments »

  1. Jeph Christoff » Blog » Tables in Wordpress? said,

    April 8, 2008 @ 10:38 pm

    [...] second method, which I found on hm2k.com is actually modifying WordPress’ default TinyCME install.  TinyCME does support tables and [...]

  2. Rich said,

    May 28, 2008 @ 10:36 pm

    Great stuff, saved me a lot of poking around this.

    Thanks!

  3. Stian Andreassen said,

    May 30, 2008 @ 8:09 am

    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?

  4. Rod Carbaugh said,

    September 12, 2008 @ 4:46 pm

    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

  5. jdog said,

    October 14, 2008 @ 5:48 pm

    @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.

  6. techdog said,

    December 26, 2008 @ 4:48 pm

    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?

  7. JC said,

    June 4, 2009 @ 12:35 am

    When I look for the file “wp-includes/js/tinymce/tiny_mce_config.php”, it is not there. Where do I go from here?

  8. TemplateShack said,

    July 28, 2009 @ 4:26 am

    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/

  9. Kompressionsstrümpfe said,

    August 3, 2009 @ 11:07 am

    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.

RSS feed for comments on this post · TrackBack URL

Leave a Comment