MCE Table Buttons is a light weight WordPress plug-in that adds table editing controls to a third row in the WordPress WYSIWYG editor!

Version 1.0.1 update released December 7, 2009!

Download version 1.0.1 from the WordPress plug-in repository »

Description

Adds table editing buttons to a new, third row in the WordPress WYSIWYG editor.

A very light weight plug-in based on a slightly modified version of the table editor plug-in included with the full version of TinyMCE 3.2.7. Only includes English localization; please let us know if you would like additional localizations added.

Note that this should not be used with other plug-ins that significantly alter the editor’s default behavior. It is intended to be a simple, light weight solution for editors who only want to add table management to WordPress’ included editor.

Hoping to add the ability to hide the new table editing toolbar with the “kitchen sink” option in a future update.

Add a second block of HTML content to WordPress pages. A perfect solution for layouts with two distinct
content areas or “blocks”, such as a sidebar or two column view. When editing a page, a second WordPress
WYSIWYG content editor will appear beneath the standard page editing block.
The content in this second block can be used by adding the new widget (“Content Block 2″) to your sidebar,
or calling in the content in your template.
To echo its content on the page, use the function `the_content_2()`. To retrieve the content without echoing
it onto the page, use `get_the_content_2()`. Both functions optionally take a page ID parameter which, if
provided, will return the secondary content for that page. When no page ID is provided, the functions will
attempt to retrieve the secondary content for the current page.
A future update will include some configuration options, including an option to add the feature to posts
(the feature is “pages” only for now) and an option to specify a heading for the widg

This plug-in has only been tested with WordPress 2.8.5 and 2.8.6. However, it is expected to work with WordPress 2.7 and newer.

    Screenshots

    MCE Table Buttons added to WordPress editor

    Installation

    1. Install easily with the WordPress plugin control panel or manually download the plugin and upload the extracted folder to the `/wp-content/plugins/` directory
    2. Activate the plugin through the ‘Plugins’ menu in WordPress.

    Changelog

    1.0.1 – Fixed TinyMCE bug preventing table insertion on WebKit browsers (Chrome and Safari)

    As always, feedback and suggestions are welcome!

    27 Responses to “MCE Table Buttons (WordPress Plug-in)”

    1. Matt says:

      I just installed this plugin and it doesn’t work with 2.8.6. It refuses to insert a table.

    2. Jake Goldman says:

      Matt – I’ve tested the plug-in again with 2 WordPress installs running 2.8.6, without issue. My guess is a plug-in conflict, in your case.

    3. Adrian Vogt says:

      It indeed does NOT work as-is. I seem to have the same problem (also WP 2.8.6). Pressing the insert button scrolls the window to move the “dialog” at the top of the window (on Safari).

      Techtalk: Using a Javascript debugger, I noticed where it fails. It tries to evalute the two popup menus “tframe” and “rules”, which are undefinded (index -1).

      Workaround: By selecting an arbitrary value on the second tab of the dialog for the two popup menus labeled Frame and Rules, e.g. void and none, the table can be inserted. It will show up as a set of narrow rectangle (hard to see the cells). But its possible to navigate using the cursor key and insert text then.

    4. Jake Goldman says:

      Adrian – I stand corrected. There seems to be a WebKit browser specific quirk (can reproduce in Chrome as well as Safari). I will investigate a fix.

    5. Jake Goldman says:

      It appears this was a known bug with TinyMCE that was fixed in 3.2.7… guessing 2.8.6 doesn’t run latest version. Will try to work around with a code mod.

      http://tinymce.moxiecode.com/punbb/viewtopic.php?pid=65622

    6. Jake Goldman says:

      I’ve implemented a fix and have updated the plug-in.

    7. Adrian Vogt says:

      Wow that was a fast fix. Version 1.0.01 no longer requires the workaround.

      Thanks Jake.

    8. If you want to add it to the kitchen sink instead of on its own line, it’s a super easy fix. Just change line 35 to

      add_filter('mce_buttons_2', 'rigbc_mcetable_buttons');

      (Note that the kitchen sink is line 2 of tinymce. You were previously adding it on line 3 – its own line.)

    9. Jake Goldman says:

      Deanna – thanks for the tip. I was aware of that, but the problem was that for many users who don’t have high resolution screens, the new buttons would not fit in the space dedicated to the “kitchen sink” (causing it to overflow and look back).

      I may make this an option in an update. Ideally, I’d like to hook the kitchen sink code to show / hide the third line, but there doesn’t appear to be any easy way to accomplish this. Would probably need to write some smart jQuery code to accomplish that.

    10. MadtownLems says:

      Jake – I’ve been trying to hook into the kitchen sink all afternoon, with minimal progress.

      I did come across this: http://www.neele.name/pdw_toggle_toolbars/

      It’s a TinyMCE plugin that does what we want to do with the Kitchen Sink, but it’s certainly not the solution we were looking for.

      My attempts revolved around adding a click handler to #content_wp_adv but I had trouble getting a script to run after that button is created and available. Any ideas? Between the 3 of us (I’m including Deanna) we can make this work!!! :)

      Thanks for the plugin!

    11. Geoff says:

      I’ve been trying to get this plugin to work with Firefox and am not having any luck. I don’t see any mention of FF not working on your site here or on the Table plugin page for TinyMCE.

      When I activate this plugin and edit a page/post, I get a bunch of JavaScript errors and the TinyMCE editor fails to load.

      In IE, the plugin works perfectly. I have not tested with any other browsers. Have you had luck getting it to work with Firefox? I’m using 3.5.6

      Thank you for any suggestions you might have.

    12. Jake Goldman says:

      Geoff — admittedly, I haven’t tested in 2.9 yet (will do that in a minute), but I know for certain that it worked with Firefox, Chrome, Safari, and IE8 in WordPress 2.8.6.

      UPDATE tried it in 2.9 without an issue in the latest version of Firefox (3.5.6) and WordPress 2.9.1…

    13. yoni says:

      Hi Jake, I installd the MCE Table Buttons and its works great… (Thanks…), the table looks good in FireFox but broken in Explorer. If posible please look at the page in FireFox & Explorer.

      I am using WP 2.9.1 & MCE 1.0.1

      http://www.mofet-etzion.bigzoola.com/technology/features

      Thanks,
      Yoni

    14. Jake Goldman says:

      yoni – did you make that table with this plug-in? There’s a LOT wrong with it…

    15. yoni says:

      Jake, Yes I did, but I took some parts frop the old html page. I’ll make it all again… thanks…
      Yoni

    16. yoni says:

      I made it all only with the plug-in and it’s ok now.
      Thanks
      Yoni

    17. Lucas says:

      I would like to nest one table within another visually using this plugin but when I click in a cell and click the add table button I get a popup allowing me to change the properties of the current table and not options for a new table.

      I hope you can figure out what I mean.

      Lucas

    18. Jake Goldman says:

      Lucas – the plugin does not directly support nested tables. This plugin essentially adds back the table module from TinyMCE (the editor WordPress uses). We write the code that adds that TinyMCE module back into the WordPress editor, but we are not maintaining the table management code itself, so this is not something well be changing. You may be able to find some tips on the TinyMCE site, however.

    19. Lucas says:

      ok thanks for your help anyway Jake.

    20. Aaron says:

      Thanks for plugin! It’s not too much and it works. Looking forward to the update to include the buttons with the kitchen sink.

    21. Bisnis Pulsa says:

      Thanks For the Plugins!

      This Is Awesome!

    22. Great work on this plugin. It was exactly what I was looking for and it works flawlessly on 2.9.2.

      Cheers!

    23. Claus Jepsen says:

      My tables change the cell size, so it is not possible to allign two tables under each other.

      Hope there is a fix for that.

    24. Jake Goldman says:

      Claus – not sure I understand. Are you saying the cell widths you specify in the cell properties are getting stripped out when you publish the page or post?

    25. | WordPress Blue says:

      [...] MCE table buttons, a plugin by Jacob M. Goldman of C. Murray Consulting, can, of course, be used for tables – we’ll get there in a moment. But a single-cell table is also a fast-and-dirty way to format text for emphasis or navigation. [...]

    26. Alessandro says:

      Hello!
      I have installed the plugin and I use the latest version of WordPress. I have only one problem. When I save an article or a page where I added elements of the new editor and I try to switch to another section of the backend I get a warning that the content has not been saved and I could lose data.
      How can I fix it?
      Thanks

      Ale

    27. Jake Goldman says:

      Alessandro – I don’t think that’s related to this plugin. Are you certain deactivating it fixes the problem?