MCE Table Buttons for WordPress
MCE Table Buttons is a light weight WordPress plug-in that adds table editing controls to a third row in the WordPress WYSIWYG editor!
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
As always, feedback and suggestions are welcome!
58 Thoughts Contributed to “MCE Table Buttons”
What do you think?
Screenshots
I just installed this plugin and it doesn’t work with 2.8.6. It refuses to insert a table.
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.
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.
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.
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
I’ve implemented a fix and have updated the plug-in.
Wow that was a fast fix. Version 1.0.01 no longer requires the workaround.
Thanks.
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.)
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.
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!
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.
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…
Hi, I installed 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
yoni – did you make that table with this plug-in? There’s a LOT wrong with it…
Yes I did, but I took some parts frop the old html page. I’ll make it all again… thanks…
Yoni
I made it all only with the plug-in and it’s ok now.
Thanks
Yoni
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
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.
ok thanks for your help anyway.
Thanks for plugin! It’s not too much and it works. Looking forward to the update to include the buttons with the kitchen sink.
Thanks For the Plugins!
This Is Awesome!
Great work on this plugin. It was exactly what I was looking for and it works flawlessly on 2.9.2.
Cheers!
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.
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?
Pingback: | WordPress Blue
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
Alessandro – I don’t think that’s related to this plugin. Are you certain deactivating it fixes the problem?
Thanks for the plug-in, works great on my vanilla 3.0.1 installation using FF 3+.
The only thing I miss is the ability to insert or assign table header cells (TH).
I have not used TinyMCE outside wordpress recently, so I guess (for all I know) the lack of header cell support can be directly contributed to TinyMCE. It would just be nice to have it in there
Thanks again, it works as expected (except for TH’s, of course).
Werner – appreciate the feedback, but the buttons themselves are all just pulled from the full TinyMCE suite. My code simply reinserts them into the WordPress editor… as such I won’t be writing new button code for TH’s (or anything else).
hello,
great plugin. it works fine with wordpress 3.0.1 and MCE Table Buttons 1.0.1.
i’ve also noticed the save “error” but it does not affect content saving so no problem.
just one question: in my brand new wordpress 3.0.1 install with default template Twenty Ten 1.1 by the WordPress team, i set my table to:
Title 1
Desc 1
Title 2
Desc 2
the actual content in Desc 1 and Desc 2 is much longer, poems, lyrics. in spite of width 100% the text looks squeezed and it does not take say 100% of browser width. what should be edited? i think it must have to do with the template but would like to know beforehand.
thanks,
hello,
i meant:
table style=”width: 100%;” border=”0″ cellspacing=”5″ cellpadding=”5″>
tbody>
tr>
td>Title 1
td>Desc 1
/tr>
tr>
td>Title 2
td>Desc 2
/tr>
/tbody>
/table>
but the html code got parsed so i had to drop the < to get it displayed
Works great. Thanks!
Attempting to use MCE table button plugin. Popup opens but its blank. According to FF’s Web developer “tinyMCE.popup” is not found in mce-table-buttons/mce-table/js.table.js.
Running wordpress install from Debian stable.
MCE table button plugin is 1.01 downloaded from wordpress.org
WIlliam – Can’t replicate this…
Just installed v1.02 with this plugin. Am using wordpress. We are running Debian stable but we pulled the version from testing (squeeze) so its: 3.0.1-2. That version’s tiny MCE appears to to be missing something: I get the following javascript error: tinyMCEPopup is not defined in plugins/mce-table-buttons/mce-table/js/table.js line 1.
Do I need to install a “full” version of tiny mce instead of the version which comes with the WordPress package? The popup appears but its empty. This happens in both FF and Crome. It looks like Debian symlinks to their common tiny_mce.js and tiny_mce_popup.js Has anyone tested it with this setup?
Ah solved my own problem. Debian installs WordPress in /usr/share/wordpress not in the local area. The solution was to put a sym link to wp-includes in the site’s document root to the wp-includes directory. Now it works. I suspect if you had wordpress installed directly under document root you would never see the problem.
Thanks for a another great plugin.
I am afraid I have the same problem as Alessandro above. I run WP 3.0.1 and with no other plug than MCE Table Buttons running, I get the “Are you sure you want to navigate away from this page?” even the page was just saved/updated. Especially with MCE in “visual”-mode, not always when in “html”-mode. I have tried in Safari 5.0.2 and Firefox 3.6.12.
Otherwise, when in Firefox, everything works fine.
Eric (and others) – the “page not saved” warning is fixed in 1.0.2
Suddenly my WP installation tells me there is an update for the MCE table button plugin. Very quick action and response. Now it works just fine. Many thanks again.
Is it possible to allow sorting?
I want to use this to create a table listing book titles and authors.
I would like for visitors to be able to click at the top on Books to sort by book names or Author to sort by authors.
Thanks
If you’re comfortable working with JavaScript in your template, there’s a nice jQuery plug-in called jQuery TableSorter that allows tables to be sorted. That’s not something this plug-in does on its own, however. It merely adds standard HTML table editing controls to the editor.
Hello! Thank you for this plugin. I love how simple it is. The only problem I’m having so far is that when I enter a value for class inside either the rows button or cell button, this value disappears when I want to re-use it later. The thing I’m concerned about is the client taking it over, I couldn’t ask them to remember the class names. Is there a way I can insert my classes so that they will always appear in the class drop down menu?
Thank you!
No easy way that I know of off hand, without forking the TinyMCE table code, unfortunately.