Enhance Your Visual Editor With TinyMCE Advanced WordPress Plugin

Enhance Your Visual Editor With TinyMCE Advanced WordPress Plugin

TinyMCE Advanced - WordPress Plugin

The WordPress WYSIWYG (What You See Is What You Get) editor is powered by TinyMCE, an Open Source application that integrates with the WordPress Content Management System.

While the default WordPress visual editor is feature-rich, there are some things it can’t do, such as easily adding tables to WordPress without requiring knowledge or skills of coding HTML and CSS.

If you are looking for more functionality and options than what is provided by the standard WordPress visual editor, then this tutorial will show you how to add a number of additional and useful enhancements to your default WordPress WYSIWYG editor.

Watch the video below, or complete the step-by-step tutorial to learn how to install and configure the TinyMCE Advanced.

WordPress Tutorial – TinyMCE Advanced

TinyMCE Advanced - WordPress Plugin

TinyMCE Advanced is a useful plugin that includes a number of additional WordPress editor-enhancing features.

The screenshot below shows the default WordPress visual editor …

TinyMCE Advanced - WordPress Plugin

Here is a screenshot of the same WordPress visual editor after TinyMCE Advanced plugin has been installed, activated and (minimally) configured on your site …

TinyMCE Advanced - WordPress Plugin

The additional functions included in TinyMCE Advanced include:

  • Advanced HR – insert a horizontal ruler
  • Advanced Image – insert and format images
  • Advanced Link – insert links to text and images.
  • Advanced List – (use this only if you experience problems with how lists display on your page).
  • Context Menu – adds a configurable context menu.
  • Emoticons (Smilies) – insert smiley images.
  • Date and Time – inserts date and time
  • IESpell – inserts a spellchecker.
  • Layer -adds some layer controls (only works on some browsers).
  • Nonbreaking – inserts nonbreaking space entities.
  • Print – adds a print button.
  • Search and Replace – adds a search/replace function.
  • Style – imports CSS classes from your themes style sheet.
  • Table – adds table management functionality.
  • Visual Characters – adds the possibility to see invisible characters.
  • XHTML Extras – adds support for XHTML specific tags.

How To Install TinyMCE Advanced Feature

Warning

Always backup your WordPress site and data before installing a new WordPress plugin!

To install the plugin, log into your WordPress site and click on Plugins > Add New

Adding A New Plugin To WordPress

Make sure that you are in the “Search” tab of the Install Plugins screen. In the Search field enter TinyMCE Advanced and click on Search Plugins

TinyMCE Advanced - WordPress Plugin

Locate TinyMCE Advanced in the results list and click on the Install Now link to automatically install the plugin on your site …

TinyMCE Advanced - WordPress Plugin

Once the plugin has been successfully installed, click Activate Plugin

TinyMCE Advanced - WordPress Plugin

Your plugin is now activated …

TinyMCE Advanced - WordPress Plugin

Configuring TinyMCE Advanced Plugin

In your WP Admin menu, select Settings > TinyMCE Advanced

TinyMCE Advanced - WordPress Plugin

The “TinyMCE Buttons Arrangement” screen will display in your browser …

TinyMCE Advanced - WordPress Plugin

(click here for an enlarged view of the above screenshot)

The screen displays a number of pre-filled and empty toolbars, and all other available buttons below the toolbars, as well as an advanced section.

The toolbars are fully configurable. Simply drag and drop buttons corresponding to the functions you want to have available on the toolbars to add, remove or rearrange your visual editor menu …

TinyMCE Advanced - WordPress Plugin

You can also drag and drop menu separators when customizing this section. This will add a vertical separator between buttons …

TinyMCE Advanced - WordPress Plugin

When you have finished customizing your toolbars, remember to click the Save Changes button to apply your changes and save your new settings …

TinyMCE Advanced - WordPress Plugin

Adding Tables To WordPress Using TinyMCE Advanced Plugin

The TinyMCE Advanced WordPress plugin adds a number of extra functions to your WordPress editor, including the ability to add tables to WordPress posts and pages.

TinyMCE Advanced - WordPress Plugin

Here is an example of a table inserted into this post using the TinyMCE Advanced plugin:

WIDGET COMPARISON CHART FOR XYZ COMPANY
Item No Product Name Description
W-001-PQA MegaWidget 2000 The MegaWidget 2000 provides the most value for the least cost.
W-019-RVY PolyWidget Use PolyWidget for multiple applications.
W-442-BCU NanoWidget NanoWidget comes in a variety of colors and sizes.

TinyMCE Advanced lets you easily add, edit and delete tables, cells and rows, align and format content in tables, merge and split cells and more while working inside your post or page.

To learn how to create and manage tables in WordPress without HTML or CSS skills using a different plugin, see this tutorial: How To Add Tables To WordPress Posts And Pages

Useful Tip

Tip #1: Some plugins add their own custom buttons to the visual editor toolbar. Sometimes this can cause the visual editor menu to interfere with other areas of your WordPress site’s administration area …

TinyMCE Advanced - WordPress Plugin

If this happens, don’t worry … there is a very simple solution! All you need to do is rearrange some of the standard buttons on the menu toolbar …

TinyMCE Advanced - WordPress Plugin

To do this, bring up the TinyMCE Buttons Arrangement screen (Settings > TinyMCE Advanced) and drag some of the buttons away from the toolbar that is crowded with too many custom buttons to an emptier toolbar …

TinyMCE Advanced - WordPress Plugin

Once you have finished rearranging your menu buttons, click the “Save Changes” button to save your new settings …

TinyMCE Advanced - WordPress Plugin

Now, when you bring up the visual editor on your screen, you should find that the problem has been solved (if it hasn’t just keep rearranging the buttons until the issue has been corrected!) …

TinyMCE Advanced - WordPress Plugin

See the plugin site for more information, documentation and FAQs: TinyMCE Advanced

Tip #2: Another plugin that takes the concept of enhancing your WordPress visual editor even further, is Ultimate Tiny MCE

 Ultimate TinyMCE - WordPress Plugin

Ultimate Tiny MCE seems to be a well supported plugin with lots of documentation (including video tutorials) that provides many of the same features as TinyMCE Advanced, but offers additional features such as:

  • Advanced image features like mouseover and mouseout effects … even add your own popup javascript windows when a user clicks a link.
  • Add your own custom CSS using drop-down menus (no HTML knowledge required).
  • Easily Insert page anchors into long posts.
  • Image mapping allows you to add separate navigation links to the same image.
  • Over 40 emoticons (smilies)
  • And a whole lot more …

WordPress Plugin

For more information about this plugin, visit the plugin site here: Ultimate Tiny MCE

Now you know how to enhance your WordPress visual editor with many additional powerful features, and how to customize the WordPress WYSIWYG editor layout.

WordPress is huge and can sometimes be overwhelming about where to start. As you move on to the next Page, you will have a clearer picture of where to start and progress to building a professional WordPress Site.

Related Tutorials

 

 

error: Content is protected !!