jump to navigation

TinyMCE Advanced WordPress Editor July 14, 2011

Posted by Tournas Dimitrios in Wordpress - 3.

The default  WYSIWYG editor in WordPress is newbie friendly, easy to use and simple to manage . By default this editor has only few of it’s features enabled . To enable more features of this default editor ,  a webmaster , could hack the source code or instal extra plugins .  One such plugin  is the TinyMCE Advanced ,  which is a superior visual editor that enables the user to edit HTML content in a more user friendly way. This plugin offers a whole lot of features over and above the default editor offered by WordPress .

Installing and enabling this plugin will release many extra features like :

  • Support for making and editing tables.
  • In-line css styles.
  •  Emoticons (Smileys)
  • Font Size & Font Family selection
  • Search and Replace while editing.
  • Imports all CSS classes from the main theme stylesheet and add them to a drop-down list.
  • Totally adds over 40 buttons to WordPress WYSIWYG editor

Here is a screenshot of the various buttons it adds to your WordPress Edit post area :

How to configure this Plugin :

  • Search, install and activate “TinyMCE advanced” from Plugins -> Add new
  • In Settings  -> TinyMCE Advanced, drag and drop as many icons as you want from the bottom panel onto the toolbar.
  • Check “Import the current theme CSS Classes” at the bottom
  • “ Save Changes ” and enjoy the new editing environment

Don’t like to install extra plugins ? Adding more buttons to the default editor is really easy. Simply paste this snippet into your theme’s functions.php file ( Dashboard -> Appearance -> editor -> From drop down select your theme and from the sidebar the function.php file . Finally append the following code at the end of the file . Don’t forget to store the changes .

 //customize tiny editor
function customize_editor($buttons) {
  $buttons[] = 'anchor ';
  $buttons[] = 'insertdate';
  $buttons[] = 'inserttime';
  $buttons[] = 'hr';
  $buttons[] = 'fontselect';
  $buttons[] = 'fontsizeselect';
  $buttons[] = 'styleselect';
  return $buttons;
add_filter("mce_buttons_3", "customize_editor");

The TinyMCE website has a full list of available buttons and plugins for adding to the editor . Each button has an corresponding plugin , some plugins are installed by default but not enabled , other plugins need to be installed first before enabling the button . These sites may help you to customize the editor


No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s