19.09.2008
How to implement table editing in Wordpress
Wordpress by default makes use of the TinyMCE rich text editor and as such, it’s quite extendable. It’s very well documented in their documentation wiki and does a lot more than what Wordpress enables out of the box.
This is what I was looking to do
Wordpress’ WYSIWYG displaying table editing tools on the bottom row.
Shock horror! I hear some standardistas ranting about tables being evil already. Well, I hate to burst some bubbles, but tables were invented for a reason. Believe it or not, for tabular data!
Wordpress, the popular content management system was initially built for blogs, and I am guessing the omission of the ability to create and edit tables in the interface was a well thought out decision and I hold nothing against them for doing so. My clients however, they disagree. Well some of them at least.
Now that Wordpress is powering not only blogs, but online magazines, corporate websites and all different types of sites, it’s quick becoming a very powerful and popular generic CMS. Extending it has become a big game.
My client had a pricing page and needed the ability to add tables, modify cells, padding, spacing, background colours etc.
Cobus over at Fresh01 found this page on the Wordpress codex site which you’ll noticed I’ve commented on. I just felt the need to write this post with a bit more detail.
The process
Firstly I downloaded TinyMCE, and put the “table” folder into the plugins directory in wp-includes/js/tinymce/plugins.
Then in the file tiny_mce_config.php I edited this line:
$plugins = array( 'safari', 'inlinepopups', 'autosave', 'spellchecker', 'paste', 'wordpress', 'media', 'fullscreen' );
and added
,'table'
into the array.
I then scrolled down and edited
$mce_buttons_3 = apply_filters('mce_buttons_3', array( ));
by adding
'tablecontrols'
making it
$mce_buttons_3 = apply_filters('mce_buttons_3', array('tablecontrols' ));
Then opened up a post/page edit and refreshed the page…. Viola! Table editing tools.
Problem, I can’t edit the cell colours…
Well, after editing the config file and being familiar with the way it’s laid out, all I needed to do was look at the available buttons and controls for TinyMCE and find the button for background colour, and that happend to be backcolor.
Therefore, after ‘tablecontrols’ in the line
$mce_buttons_3 = apply_filters('mce_buttons_3', array('tablecontrols' ));
I added
, 'backcolor'
So it looked like
$mce_buttons_3 = apply_filters('mce_buttons_3', array('tablecontrols', 'backcolor' ));
And thats that.
If you want to add other buttons and controls, browse through that wiki page, and if they don’t activate, you’ll just need to upload the relative plugin folder from your downloaded TinyMCE package.
mkjones 30/09/2008 at 5:52 pm
Cheers for this one mate
I got it working but it looks a bit weird, everything has {#table_dlg.xxx} in the editor?
Any idea what the problem is?
ROFL 03/10/2008 at 4:32 pm
Hi there, I was trying to get this to work for wp 2.6.2. I had to add the language to TinyMCE and clear the wp cache to display the new buttons/languages:
1. Go to wp-includes\js\tinymce\plugins\table\langs
2. Open en_dlg.js
3. Copy all content to wp-includes\js\tinymce\langs\wp-langs.php and make sure it has the same format as the other language entries in this file.
4. Remove cache files from wp-content\uploads\js_cache to show new language in TinyMCE.
Good luck
jdog 14/10/2008 at 7:45 pm
@ROFL:
Thanks for the tip! For everyone who tries it, note that it takes a good bit of tweaking and a *very* detail-oriented eye to get it working. It helps to know some PHP and how all the single/double quotes are pairing up.
Ross Allchorn 15/10/2008 at 9:10 am
Well, it looks like ROFL fielded that one (phew!). I’ll look into it in more detail when I have the need/time.
Bassscape 21/10/2008 at 12:30 am
Hi,
Thanks for publishing this information, it looks like it will help me avoid using so many plugins!
I have updated the wp-langs.php file by adding all of the content from the en_dlg.js file. I’m still getting the strange titles like {#table_dlg.xxx}.
Could you help me with the necessary php formatting?
Here’s what I’ve added:
tinyMCE. addI18n(”‘ . $language . ‘. table_dlg’) ) . ‘”,{
general_tab:”‘ . mce_escape( __(’General’) ) . ‘”,
advanced_tab:”‘ . mce_escape( __(’Advanced’) ) . ‘”,
general_props:”‘ . mce_escape( __(’General properties’) ) . ‘”,
advanced_props:”‘ . mce_escape( __(’Advanced properties’) ) . ‘”,
rowtype:”‘ . mce_escape( __(’Row in table part’) ) . ‘”,
title:”‘ . mce_escape( __(’Insert/Modify table’) ) . ‘”,
width:”‘ . mce_escape( __(’Width’) ) . ‘”,
height:”‘ . mce_escape( __(’Height’) ) . ‘”,
cols:”‘ . mce_escape( __(’Cols’) ) . ‘”,
rows:”‘ . mce_escape( __(’Rows’) ) . ‘”,
cellspacing:”‘ . mce_escape( __(’Cellspacing’) ) . ‘”,
cellpadding:”‘ . mce_escape( __(’Cellpadding’) ) . ‘”,
border:”‘ . mce_escape( __(’Border’) ) . ‘”,
align:”‘ . mce_escape( __(’Alignment’) ) . ‘”,
align_default:”‘ . mce_escape( __(’Default’) ) . ‘”,
align_left:”‘ . mce_escape( __(’Left’) ) . ‘”,
align_right:”‘ . mce_escape( __(’Right’) ) . ‘”,
align_middle:”‘ . mce_escape( __(’Center’) ) . ‘”,
row_title:”‘ . mce_escape( __(’Table row properties’) ) . ‘”,
cell_title:”‘ . mce_escape( __(’Table cell properties’) ) . ‘”,
cell_type:”‘ . mce_escape( __(’Cell type’) ) . ‘”,
valign:”‘ . mce_escape( __(’Vertical alignment’) ) . ‘”,
align_top:”‘ . mce_escape( __(’Top’) ) . ‘”,
align_bottom:”‘ . mce_escape( __(’Bottom’) ) . ‘”,
bordercolor:”‘ . mce_escape( __(’Border color’) ) . ‘”,
bgcolor:”‘ . mce_escape( __(’Background color’) ) . ‘”,
merge_cells_title:”‘ . mce_escape( __(’Merge table cells’) ) . ‘”,
id:”‘ . mce_escape( __(’Id’) ) . ‘”,
style:”‘ . mce_escape( __(’Style’) ) . ‘”,
langdir:”‘ . mce_escape( __(’Language direction’) ) . ‘”,
langcode:”‘ . mce_escape( __(’Language code’) ) . ‘”,
mime:”‘ . mce_escape( __(’Target MIME type’) ) . ‘”,
ltr:”‘ . mce_escape( __(’Left to right’) ) . ‘”,
rtl:”‘ . mce_escape( __(’Right to left’) ) . ‘”,
bgimage:”‘ . mce_escape( __(’Background image’) ) . ‘”,
summary:”‘ . mce_escape( __(’Summary’) ) . ‘”,
td:”‘ . mce_escape( __(’Data’) ) . ‘”,
th:”‘ . mce_escape( __(’Header’) ) . ‘”,
cell_cell:”‘ . mce_escape( __(’Update current cell’) ) . ‘”,
cell_row:”‘ . mce_escape( __(’Update all cells in row’) ) . ‘”,
cell_all:”‘ . mce_escape( __(’Update all cells in table’) ) . ‘”,
row_row:”‘ . mce_escape( __(’Update current row’) ) . ‘”,
row_odd:”‘ . mce_escape( __(’Update odd rows in table’) ) . ‘”,
row_even:”‘ . mce_escape( __(’Update even rows in table’) ) . ‘”,
row_all:”‘ . mce_escape( __(’Update all rows in table’) ) . ‘”,
thead:”‘ . mce_escape( __(’Table Head’) ) . ‘”,
tbody:”‘ . mce_escape( __(’Table Body’) ) . ‘”,
tfoot:”‘ . mce_escape( __(’Table Foot’) ) . ‘”,
scope:”‘ . mce_escape( __(’Scope’) ) . ‘”,
rowgroup:”‘ . mce_escape( __(’Row Group’) ) . ‘”,
colgroup:”‘ . mce_escape( __(’Col Group’) ) . ‘”,
col_limit:”‘ . mce_escape( __(’Youve exceeded the maximum number of columns of {$cols}. ‘) ) . ‘”,
row_limit:”‘ . mce_escape( __(’Youve exceeded the maximum number of rows of {$rows}. ‘) ) . ‘”,
cell_limit:”‘ . mce_escape( __(’Youve exceeded the maximum number of cells of {$cells}. ‘) ) . ‘”,
missing_scope:”‘ . mce_escape( __(’Are you sure you want to continue without specifying a scope for this table header cell. Without it, it may be difficult for some users with disabilities to understand the content or data displayed of the table. ‘) ) . ‘”,
caption:”‘ . mce_escape( __(’Table caption’) ) . ‘”,
frame:”‘ . mce_escape( __(’Frame’) ) . ‘”,
frame_none:”‘ . mce_escape( __(’none’) ) . ‘”,
frame_groups:”‘ . mce_escape( __(’groups’) ) . ‘”,
frame_rows:”‘ . mce_escape( __(’rows’) ) . ‘”,
frame_cols:”‘ . mce_escape( __(’cols’) ) . ‘”,
frame_all:”‘ . mce_escape( __(’all’) ) . ‘”,
rules:”‘ . mce_escape( __(’Rules’) ) . ‘”,
rules_void:”‘ . mce_escape( __(’void’) ) . ‘”,
rules_above:”‘ . mce_escape( __(’above’) ) . ‘”,
rules_below:”‘ . mce_escape( __(’below’) ) . ‘”,
rules_hsides:”‘ . mce_escape( __(’hsides’) ) . ‘”,
rules_lhs:”‘ . mce_escape( __(’lhs’) ) . ‘”,
rules_rhs:”‘ . mce_escape( __(’rhs’) ) . ‘”,
rules_vsides:”‘ . mce_escape( __(’vsides’) ) . ‘”,
rules_box:”‘ . mce_escape( __(’box’) ) . ‘”,
rules_border:”‘ . mce_escape( __(’border’) ) . ‘”
});
Carlos 22/10/2008 at 9:00 pm
early on in wp-langs.php, after:
$strings = ‘tinyMCE.addI18n({’ . $language . ‘:{
….you can add the following segment.. it will define most of the buttons.. i got lazy and didnt finish them, so you can do the rest
table_dlg:{
rows:”‘ . mce_escape( __(’Row’) ) . ‘”,
cellpadding:”‘ . mce_escape( __(’Cellpadding’) ) . ‘”,
align:”‘ . mce_escape( __(’Align’) ) . ‘”,
width:”‘ . mce_escape( __(’Width’) ) . ‘”,
cellspacing:”‘ . mce_escape( __(’Cellspacing’) ) . ‘”,
border:”‘ . mce_escape( __(’Border’) ) . ‘”,
height:”‘ . mce_escape( __(’Height’) ) . ‘”,
general_tab:”‘ . mce_escape( __(’General’) ) . ‘”,
advanced_tab:”‘ . mce_escape( __(’Advanced’) ) . ‘”,
align_middle:”‘ . mce_escape( __(’Middle’) ) . ‘”,
align_left:”‘ . mce_escape( __(’Left’) ) . ‘”,
align_right:”‘ . mce_escape( __(’Right’) ) . ‘”,
general_props:”‘ . mce_escape( __(’General’) ) . ‘”,
advanced_props:”‘ . mce_escape( __(’Advanced’) ) . ‘”,
id:”‘ . mce_escape( __(’id’) ) . ‘”,
summary:”‘ . mce_escape( __(’summary’) ) . ‘”,
style:”‘ . mce_escape( __(’style’) ) . ‘”,
langcode:”‘ . mce_escape( __(’Language’) ) . ‘”,
bgimage:”‘ . mce_escape( __(’Background Image’) ) . ‘”,
frame:”‘ . mce_escape( __(’Frame’) ) . ‘”,
rules:”‘ . mce_escape( __(’Rules’) ) . ‘”,
langdir:”‘ . mce_escape( __(’Langdir’) ) . ‘”,
bordercolor:”‘ . mce_escape( __(’Bordercolor’) ) . ‘”,
bgcolor:”‘ . mce_escape( __(’Background Color’) ) . ‘”,
caption:”‘ . mce_escape( __(’Caption’) ) . ‘”,
rowtype:”‘ . mce_escape( __(’Row type’) ) . ‘”,
valign:”‘ . mce_escape( __(’Vertical Align’) ) . ‘”,
tbody:”‘ . mce_escape( __(’Table Body’) ) . ‘”,
thead:”‘ . mce_escape( __(’Table Heading’) ) . ‘”,
tfoot:”‘ . mce_escape( __(’Table Footer’) ) . ‘”,
align_top:”‘ . mce_escape( __(’Top’) ) . ‘”,
align_bottom:”‘ . mce_escape( __(’Bottom’) ) . ‘”,
row_title:”‘ . mce_escape( __(’Row Properties’) ) . ‘”,
cell_title:”‘ . mce_escape( __(’Cell Properties’) ) . ‘”,
cell_type:”‘ . mce_escape( __(’Cell Type’) ) . ‘”,
scope:”‘ . mce_escape( __(’Scope’) ) . ‘”,
td:”‘ . mce_escape( __(’Table Cell’) ) . ‘”,
th:”‘ . mce_escape( __(’Table Heading’) ) . ‘”,
cols:”‘ . mce_escape( __(’Column’) ) . ‘”
},
Kimmono 07/11/2008 at 8:53 am
Any chance you could upload a modified version of wp-langs.php?
thanks for a great effort here! I have been looking for a way of adding tables to Wordpress for over a year.
Kimmono
Trey 01/12/2008 at 10:10 pm
If someone finds it useful, here’s the newly formatted additions to wp-langs.php:
tinyMCE.addI18n(”‘ . $language . ‘.table_dlg”,{
general_tab:”‘ . mce_escape( __(’General’) ) . ‘”,
advanced_tab:”‘ . mce_escape( __(’Advanced’) ) . ‘”,
general_props:”‘ . mce_escape( __(’General properties’) ) . ‘”,
advanced_props:”‘ . mce_escape( __(’Advanced properties’) ) . ‘”,
rowtype:”‘ . mce_escape( __(’Row in table part’) ) . ‘”,
title:”‘ . mce_escape( __(’Insert/Modify Table’) ) . ‘”,
width:”‘ . mce_escape( __(’Width’) ) . ‘”,
height:”‘ . mce_escape( __(’Height’) ) . ‘”,
cols:”‘ . mce_escape( __(’Cols’) ) . ‘”,
rows:”‘ . mce_escape( __(’Rows’) ) . ‘”,
cellspacing:”‘ . mce_escape( __(’Cellspacing’) ) . ‘”,
cellpadding:”‘ . mce_escape( __(’Cellpadding’) ) . ‘”,
border:”‘ . mce_escape( __(’Border’) ) . ‘”,
align:”‘ . mce_escape( __(’Alignment’) ) . ‘”,
align_default:”‘ . mce_escape( __(’Default’) ) . ‘”,
align_left:”‘ . mce_escape( __(’Left’) ) . ‘”,
align_right:”‘ . mce_escape( __(’Right’) ) . ‘”,
align_middle:”‘ . mce_escape( __(’Center’) ) . ‘”,
row_title:”‘ . mce_escape( __(’Table row properties’) ) . ‘”,
cell_title:”‘ . mce_escape( __(’Table cell properties’) ) . ‘”,
cell_type:”‘ . mce_escape( __(’Cell type’) ) . ‘”,
valign:”‘ . mce_escape( __(’Vertical alignment’) ) . ‘”,
align_top:”‘ . mce_escape( __(’Top’) ) . ‘”,
align_bottom:”‘ . mce_escape( __(’Bottom’) ) . ‘”,
bordercolor:”‘ . mce_escape( __(’Border color’) ) . ‘”,
bgcolor:”‘ . mce_escape( __(’Background color’) ) . ‘”,
merge_cells_title:”‘ . mce_escape( __(’Merge table cells’) ) . ‘”,
id:”‘ . mce_escape( __(’Id’) ) . ‘”,
style:”‘ . mce_escape( __(’Style’) ) . ‘”,
langdir:”‘ . mce_escape( __(’Language direction’) ) . ‘”,
langcode:”‘ . mce_escape( __(’Language code’) ) . ‘”,
mime:”‘ . mce_escape( __(’Target MIME Type’) ) . ‘”,
ltr:”‘ . mce_escape( __(’Left to right’) ) . ‘”,
rtl:”‘ . mce_escape( __(’Right to left’) ) . ‘”,
bgimage:”‘ . mce_escape( __(’Background image’) ) . ‘”,
summary:”‘ . mce_escape( __(’Summary’) ) . ‘”,
td:”‘ . mce_escape( __(’Data’) ) . ‘”,
th:”‘ . mce_escape( __(’Header’) ) . ‘”,
cell_cell:”‘ . mce_escape( __(’Update current cell’) ) . ‘”,
cell_row:”‘ . mce_escape( __(’Update all cells in row’) ) . ‘”,
cell_all:”‘ . mce_escape( __(’Update all cells in table’) ) . ‘”,
row_row:”‘ . mce_escape( __(’Update current row’) ) . ‘”,
row_odd:”‘ . mce_escape( __(’Update odd rows in table’) ) . ‘”,
row_even:”‘ . mce_escape( __(’Update even rows in table’) ) . ‘”,
row_all:”‘ . mce_escape( __(’Update all rows in table’) ) . ‘”,
thead:”‘ . mce_escape( __(’Table Head’) ) . ‘”,
tbody:”‘ . mce_escape( __(’Table Body’) ) . ‘”,
tfoot:”‘ . mce_escape( __(’Table Foot’) ) . ‘”,
scope:”‘ . mce_escape( __(’Scope’) ) . ‘”,
rowgroup:”‘ . mce_escape( __(’Row Group’) ) . ‘”,
colgroup:”‘ . mce_escape( __(’Col Group’) ) . ‘”,
col_limit:”‘ . mce_escape( __(’You have exceeded the maximum number of columns’) ) . ‘”,
row_limit:”‘ . mce_escape( __(’You have exceeded the maximum number of rows’) ) . ‘”,
cell_limit:”‘ . mce_escape( __(’You have exceeded the maximum number of cells’) ) . ‘”,
missing_scope:”‘ . mce_escape( __(’Are you sure you want to continue without specifying a scope for this table header cell. Without it, it may be difficult for some users with disabilities to understand the content or data displayed of the table’) ) . ‘”,
caption:”‘ . mce_escape( __(’Table caption’) ) . ‘”,
frame:”‘ . mce_escape( __(’Frame’) ) . ‘”,
frame_none:”‘ . mce_escape( __(’none’) ) . ‘”,
frame_groups:”‘ . mce_escape( __(’groups’) ) . ‘”,
frame_rows:”‘ . mce_escape( __(’rows’) ) . ‘”,
frame_cols:”‘ . mce_escape( __(’cols’) ) . ‘”,
frame_all:”‘ . mce_escape( __(’all’) ) . ‘”,
rules:”‘ . mce_escape( __(’rules’) ) . ‘”,
rules_void:”‘ . mce_escape( __(’avoid’) ) . ‘”,
rules_above:”‘ . mce_escape( __(’above’) ) . ‘”,
rules_below:”‘ . mce_escape( __(’below’) ) . ‘”,
rules_hsides:”‘ . mce_escape( __(’hsides’) ) . ‘”,
rules_lhs:”‘ . mce_escape( __(’lhs’) ) . ‘”,
rules_rhs:”‘ . mce_escape( __(’rhs’) ) . ‘”,
rules_vsides:”‘ . mce_escape( __(’vsides’) ) . ‘”,
rules_box:”‘ . mce_escape( __(’box’) ) . ‘”,
rules_border:”‘ . mce_escape( __(’border’) ) . ‘”
});
Ross Allchorn 02/12/2008 at 10:22 am
Thanks Trey, much appreciated.
techdog 26/12/2008 at 7:09 pm
I am using WP 2.7 and attempting to install the table buttons. I have followed the steps above, uploaded the table folder to the proper place, and made the changes to the tiny_mce_config.php file but I do not see the third row of buttons with the table information. Did 2.7 do something to stop this?
Thanks.
Ross Allchorn 26/12/2008 at 10:12 pm
Hi Techdog (Karl?). Unfortunately I haven’t had the time to test this in 2.7 yet. I guess I’ll tackle it in the first of the upgrades that need tables, or on a new site.
One idea might be to force refresh (CTRL+F5 on a PC). The code for the RTE gets cached and you need to set it free.
Please let me know if this sorts you out.
~R
dmitcha 26/12/2008 at 11:02 pm
Hi, I cannot seem to get the button language to update.
I followed the steps above:
1) Downloaded TinyMCE
2) Installed table folder
3) Updated config to add ‘table’ to the array list for $plugins (techdog, if you are not seeing the third row of buttons, double check that you did this step in the right place)
4) Updated language to add table_dlg updates
5) Cleared cache
Still saw the code on the table options rather than the button labels.
5) “Removed” (as in deleted) cache file from js_cache. No longer could toggle to visual editor.
6) Control F5 to refresh and see if it would generate a new cache file. Still could not toggle to visual editor menu options
7) Restored old js_cache file. Can now toggle to visual editor but still seeing old code.
Any ideas which step I missed or messed up? This post is the tool I have been waiting for - thanks!