Useful

2011.03.20

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

In category: 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.

Wordpress TinyMCE visual editor options by default

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:

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:

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.

Wordpress TinyMCE WYSIWYG editor with enabled table editing buttons

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

Wordpress TinyMCE table editing button bug

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:

2. Save changes to check out the result.

Wordpress TinyMCE table language after corrections

Other posts

Your thoughts

Thoughts

  1. Ophelia Biebel

    Hi, i think that i saw you visited my site thus i came to “return the favor”.I’m trying to find things to enhance my web site!I suppose its ok to use some of your ideas!!

  2. Erica Beeman

    You really make it seem so easy with your presentation but I find this topic to be actually something that I think I would never understand. It seems too complicated and extremely broad for me. I’m looking forward for your next post, I’ll try to get the hang of it!

  3. Sussex

    Outstanding post, you have pointed out some wonderful details , I also conceive this s a very great website.

  4. Kraig Hageny

    Simply desire to say your article is as amazing. The clearness in your post is just great and i could assume you’re an expert on this subject. Fine with your permission let me to grab your feed to keep up to date with forthcoming post. Thanks a million and please keep up the gratifying work.

 

Latest work