TinyMCE in WordPress analysis

From the dashboard side of view, the main function of WordPress is to mimic the Word processor. The main component of WordPress from word-processor perspective is TinyMCE plugin that is entirely based on JavaScript. Enough reasons to analyze it.

Latest current version of TinyMCE

This can be found and downloaded from here.

TinyMCE has the modular structure by introducing plugins and themes (skins). In this analysis I will try to present the modifications of the TinyMCE plugin in WordPress environment and to show how TinyMCE has been set to work from WordPress (PHP) environment.

I will show how we can modify the environment of TinyMCE by using the Advanced TinyMCE Config plugin by Andrew Ozz. Lastly we will write few PHP scripts to customize the TinyMCE.

TinyMCE plugin architecture:

architecture_of_tinymce

Plugins and themes folders are most important. They explain the modular design of TinyMCE and also are responsible for the look and feel.

Here is the list of the plugins inside TinyMCE (version 4.x):

advhr, advimage, advlink, advlist, autolink, autoresize, autosave, bbcode, contextmenu, directionality, emotions, example, example_dependency, fullpage, fullscreen, iespell, inlinepopups, insertdatetime, layer, legacyoutput, lists, media, nonbreaking, noneditable, pagebreak, paste, preview, print, save, searchreplace, spellchecker, style, tabfocus, table, template, visualblocks, visualchars, wordcount, xhtmlxtras

Customized for WordPress

However, not all of these plugins are used in WordPress version of TinyMCE – only the small subset. Here is the full list of the TinyMCE plugins used in WordPress:

directionality, fullscreen, inlinepopups, media, paste, spellchecker, tabfocus, wordpress, wpdialogs, wpeditimage, wpfullscreen, wpgallery, wplink, wpview

The unique plugins used only in WordPress are:

wordpress, wpdialogs, wpeditimage, wpfullscreen, wpgallery, wplink, wpview

As we can see TinyMCE plugin for WordPress is has been modified, comparing to the original, to better fit WordPress.

Here is how TinyMCE looks by default.

tinymce_visual

What will happen if we delete plugins and themes folder from TinyMCE?

Strange but, the same look will be present again.

Meaning that without custom coding (or without using some plugins) these folders are not used. This is because most of the users are just fine to use the existing look and feel of TinyMCE. For this case WordPress guys created one big JavaScript bundle called wp-tynimce.js.gz file that is compressed for speed. That file contains all needed for the default TinyMCE look.

How to enable TinyMCE themes and plugins?

We can now refer to the Advanced TinyMCE Config” plugin by Andrew Ozz. This plugin has a very good option to set specific TinyMCE settings. Let’s first update the default TinyMCE theme called advanced by setting the new skin. Advanced theme has the following skins:

  • default
  • highcontrast
  • o2k7
  • wp_theme

If we like to change the skin to default here what we need to do in Advanced TinyMCE Config plugin by Andrew Ozz.

tinymce_skin

While in the single theme we can update the skins as we saw, but the more important question: Can we change the TinyMCE theme and the skin? And also what are the additional TinyMCE themes if any?

Unfortunately in WordPress 3.6 we do not have any other TinyMCE theme except the one and only Advanced theme. There is also the Simple theme available if you install ”Advanced TinyMCE Config” as I checked. So I tested this and it worked.

In order to use the modern theme like in 4.0 TinyMCE we need modern theme capable to work with WordPress, which is currently not case because the naming conventions and some procedure calls inside JavaScript have been changed.

modern

tags: & category: -