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!

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

RSS feed for comments on this post · TrackBack URL

Leave a Comment