How to extend default WordPress TinyMCE WYSIWYG editor with additional features without WordPress plugins. Table editing button addition in WordPress

By default WordPress provides two options to edit posts and pages – plain HTML code and WYSIWYG (What you see is what you get) editor. WordPress WYSIWYG editor is based on TinyMCE – a platform independent web based Javascript HTML WYSIWYG editor. TinyMCE has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. WYSIWYG is a tool that saves headache and time for everyday web bloggers and website administrators. Such an editor greatly improves the efficiency and makes website administration way easier.

WordPress TinyMCE WYSIWYG or simply WordPress visual editor by default allows changing the size of the text, text color, bold, italic, underline, strikethrough, alignment, create lists and other useful things and all in all this is quite enough, but still there are times when I have had the need to extend my default WordPress WYSIWYG functionality, e.g., with table editor, because table creation in plain HTML editor can be a really painful task.

Of course, if you are not into programming and have no wish to go deeper in more technical details, there are a lot of WordPress TinyMCE plugins to choose from which will make the improvements for you, e.g., TinyMCE Advanced.

Extending the default functionality of WordPress visual editor is not a hard thing to do, but it is advisable that you have at least some knowledge of WordPress file structure, HTML, PHP and Javascript. So let’s get to it – I am going to show you how to add table editing button to the default TinyMCE editor of WordPress.

1. Download the latest version of TinyMCE from the official site

2. Extract the downloaded file archive, now open folder tinymce/jscripts/tiny_mce/plugins/, copy folder „table” and paste it inside of the WordPress installation directory wp-includes/js/tinymce/plugins/

3. Open file wp-admin/includes/post.php, find a line that starts with $plugins = array(‘safari’, ‘inlinepopups’, … and add ‘table’ add the end of it. The result should be something like this:

$plugins = array('safari', 'inlinepopups', 'spellchecker', 'paste', 'wordpress', 'media', 'fullscreen', 'wpeditimage', 'wpgallery', 'tabfocus', 'table');

4. After that find a line in the same file, that starts with $mce_buttons_2 = apply_filters and add ‘table’, ‘tablecontrols’ at the end of it. Result should look something like this:

$mce_buttons_2 = apply_filters('mce_buttons_2', array('formatselect', 'underline', 'justifyfull', 'forecolor', '|', 'pastetext', 'pasteword', 'removeformat', '|', 'media', 'charmap', '|', 'outdent', 'indent', '|', 'undo', 'redo', 'wp_help', '|', 'table', 'tablecontrols' ));

5. Open wp-includes/js/tinymce/plugins/tabele/editor_plugin.js file, copy all of its code, when it’s done open file wp-includes/js/tinymce/wp-tinymce.js.gz ,locate a line „// mark as loaded” (at the end of the file) and just above it paste the code that you previously copied.

When it’s done log in your WordPress admin panel and check if you have the ability to edit tables in WYSIWYG editor. If it’s not there – try deleting browsers cache memory.

When taking a better look at the TinyMCE table editing option titles you will see some kind of weird words like #table_dlg.cols or #table_dlg.general_tab, to solve this bug you have to make some additional changes (the problem here is within the language file).

1. Open file wp-includes/js/tinymce/langs/wp-langs.php and just before thelast line of the code copy and paste this code the:

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') ) . '"
});

2. Save changes to check out the result.

In category: Wordpress