Posted:September 6, 2006

Extending TinyMCE, the WordPress Rich Text Editor

NOTE: I have posted a major cleanup and update of what is now called the Advanced TinyMCE Editor, tested beginning with WP v. 2.2. Obtain the plug-in download and documentation HERE. The update announcement is now the best place to post new online comments and discussion. Let me know what you think! MKB

Author’s Note: There is a zipped plugin, code and documentation that supports the information in this post, which will allow you to extend the functionality of your TinyMCE rich text editor in WordPress; for immediate instructions see the end of the post below.
Download Extended TinyMCE code file Click here (NOW DISABLED!) to download the zipped file (101 KB)

My most recent post was about the smooth upgrade to WordPress v. 2.0.4 for my blog software and noted my popular Comprehensive Guide to a Professional Blog Site recounting my own experiences setting up, configuring and maintaining my own blog site. A key aspect of that earlier Guide dealt with (what I perceived to be) an oversight in older versions of WordPress that lacked a bundled WYSIWYG editor. For my own site and installation, I had chosen the Xinha editor, and had devoted a number of entries in the Guide to its configuration and use.

However, as of WordPress version 2x, the developers have now chosen to bundle the proven Javascript rich text editor, TinyMCE, as part of the standard distribution package. Since I had come to rue some of the aspects of Xinha in my earlier implementation (namely, bad HTML for carriage returns and VERY slow times when publishing a post), I decided to give TinyMCE a go as my new replacement editor.

(Actually, this was not such a major shift since we had adopted a sibling TinyMCE application, the Joomla Content Editor (JCE), for the Joomla-based BrightPlanet corporate Web site.)

As implemented, the TinyMCE editor in WordPress is configured more akin to the prior QuickTags feature set, with the few available editing functions being bold, underline, bullets, text alignment, and so forth. Here is a screen shot from my WordPress administration center with TinyMCE as delivered with WordPress v. 2.0.4:

The only problem is that I have become used to editing support for items such as tables, image manipulation, special characters, font types, and so forth. While I (generally) edit and clean up the HTML before final posting, I very much enjoy the productivity benefits of a more full-featured WYSIWYG editor. So, the rhetorical question to myself was: If I’m going to use TinyMCE, how can I extend its functionality?

The Investigations Begin

Having been familiar with other TinyMCE instantiations, I began my investigations with the (as it turns out naive) assumption that upgrading to a full featured TinyMCE would be a snap. Boy, was I wrong.

I first began with the TinyMCE Web site itself checking out the standard distribution package. Like many open source sites, I found the online documentation for TinyMCE to be fragmented, incomplete and hard to navigate. I looked under the ‘Plugins’ tab and found it was documentation for developers in creating a new plugin. My first lead came from the online manual (which can also be downladed for local browsing) and its reference to installation options, specifically these options at the bottom of that page:

Bingo! Clearly, TinyMCE had the advanced features I was seeking and they were packaged as part of the direct TinyMCE distribution to boot! Now I assumed my only needed step was to find how to “turn on” these features in my WordPress installation.

What Was Learned
This line of thinking led me to an unfortunate waste of time in Web search and poking through the forums at both the TinyMCE and WordPress sites. It became clear that the TinyMCE integration in WordPress was both highly tailored and limited to just the simple functionality (Example 00 above). I saw references by others to the “wisdom” of the WordPress developers to making this choice and therefore reducing the overall size of the WordPress download, but I don’t see it that way. It seems rather arbitrary and taking available choices from the user by unilaterally “whittling down” a more fully featured option from Moxiecode. Oh, well.

One dead end among many I pursued was instructions from the TinyMCE staff on integrating Moxiecode’s commercial plugins. That reference — http://tinymce.moxiecode.com/downloads/integration/ — got me way too into specific WordPress code that I was also unable to modify for my specific plugin purposes (though perhaps more capable programmers could have seen a clear path). I also found many requests but little guidance from the WordPress forums.

The first breakthough occurred on the TinyMCE Wishlist postings on the WordPress forum, which led me to the Advanced WYSIWYG plugin by Assaf Arkin of Labnotes. Part of the problem in finding this in the first place was that the actual plugin file name was misspelled as “advacned-wysiwyg”. So, I followed the instructions for the plugin and, voila, it didn’t work!

Grr! More investigation indicated that the likely problem resided in new version 2x plugins for TinyMCE as NOT working with the Advanced WYSIWYG plugin. As Paul Finch reported on the Labnotes site, reverting back to earlier advanced plugins for TinyMCE in versions 1.45 and earlier, which could be found on the Sourceforge download site, solved the problem.

As indeed it does, as this updated editor on my blog administration panel shows:

These “standard” advanced plugins for TinyMCE provide possible functionality beyond the simple installation (marked with an asterisk [*]) (also, ones I could not get to work — but I did not test all of them! — are shown with double asterisks [**]) for:

Default buttons available in the advanced theme:

* bold
italic
* underline
* strikethrough
* justifyleft
* justifycenter
* justifyright
* justifyfull
* bullist
* numlist
outdent
* indent
cut
copy
paste
* undo
* redo
* link
* unlink
* image
cleanup
help
* code
hr
removeformat
formatselect
fontselect
fontsizeselect
styleselect
sub
sup
forecolor
backcolor
charmap
visualaid
anchor
newdocument
separator

Plugins with the button name same as plugin name:

save
emotions
flash
iespell
preview
print
zoom
fullscreen
advhr
fullpage
spellchecker

Plugins with custom buttons:

advlink (will override the “link” button)

advimage (will override the “image” button)

paste

  • pastetext
  • pasteword
  • selectall

** searchreplace

  • search
  • replace

insertdatetime

  • insertdate
  • inserttime

table

  • tablecontrols
  • table
  • row_props
  • cell_props
  • delete_col
  • delete_row
  • col_after
  • col_before
  • row_after
  • row_before
  • row_after
  • row_before
  • split_cells
  • merge_cells

directionality

  • ltr
  • rtl

layer

  • moveforward
  • movebackward
  • absolute
  • insertlayer

** style

  • styleprops

Early Use Observations

With one major exception — and it is MAJOR! — I have generally been pleased with the new TinyMCE editor in its full functionality version. I have been working with it for nearly a week and have completed four or five published posts. The writing of posts is now much quicker. There are no longer problems with line breaks and paragraph formatting. For most functionality, the editor just feels more “solid” than my previous Xinha editor. For all of that, I am very thankful.

The major issue I have encountered is with long posts (such as this one), particularly when I am toggling between the code (HTML) view and WYSIWYG view. Without warning, I will suddenly lose entire portions of text at the bottom of the post. This appears to be either strictly a TinyMCE issue or perhaps an issue related to my Firefox browser that others have noted on the WordPress forum.

Best practices, as I have reported on elsewhere and as part of my Guide, generally suggest drafting long posts external to WordPress anyway, though the loss of any work is distressing. I will monitor this “long posting” issue carefully, and until I see a resolution I will likely save to the clipboard or take other steps to prevent future losses.

Specific Upgrade Instructions

So, because I have generally been pleased with these extensions, I thought I would package and write them up for others to use, saving you the fits and starts I went through. The download at the top of this post includes the instructions and all files noted below. The instructions are included as the readme.txt file in the package. I also chose to make some minor updates to plugin operation (better sizing of popups, for example) and also corrected the spelling error in the file name and allowed for multi-line bullets for the extended TinyMCE in the Advanced WYSIWYW plugin. All of these changes, plus the vetted TinyMCE ver. 1.45 advanced plugins, are included in the distribution. Please note this information is being provided “as is”; you can also only do this if you have direct file access to your WordPress installation.

1. Download the enclosed zip file and unzip it to a clean subdirectory; these instructions are repeated in the enclosed readme.txt file.

2. If you don’t like the button order shown in the image above, you may remove buttons or change ordering or add or remove separator bars by editing the advanced-wysiwyg.php file:

< ?php
/*
Plugin Name: Advanced WYSIWYG Editor
Plugin URI: http://www.labnotes.org/
Description: Adds more styling options to the WYSIWYG post editor, updated for multi-line buttons.
Version: 0.3
Author: Assaf Arkin
Author URI: http://labnotes.org/
License: Creative Commons Attribution-ShareAlike
Tags: wordpress tinymce
*/

if (isset($wp_version)) {
add_filter(“mce_plugins”, “extended_editor_mce_plugins”, 0);
add_filter(“mce_buttons”, “extended_editor_mce_buttons”, 0);
add_filter(“mce_buttons_2”, “extended_editor_mce_buttons_2”, 0);
add_filter(“mce_buttons_3”, “extended_editor_mce_buttons_3”, 0);
}


function extended_editor_mce_plugins($plugins) {
array_push($plugins, “table”, “fullscreen”, “searchreplace”, “advhr”, “advimage”);
return $plugins;
}


function extended_editor_mce_buttons($buttons) {
return array(
“undo”, “redo”, “separator”, “cut”, “copy”, “paste”, “separator”, “bold”, “italic”, “underline”, “strikethrough”, “separator”,
“bullist”, “numlist”, “separator”, “indent”, “outdent”, “separator”,
“justifyleft”, “justifycenter”, “justifyright”, “justifyfull”, “separator”,
“sub”, “sup”, “charmap”, “hr”, “advhr”,”separator”, “link”, “unlink”, “anchor”, “separator”,
“code”, “cleanup”, “separator”, “search”, “replace”, “separator”, “wphelp”);
}

function extended_editor_mce_buttons_2($buttons) {
// the second toolbar line
return array(
“formatselect”, “fontselect”, “fontsizeselect”, “styleselect”, “separator”, “forecolor”, “backcolor”, “separator”,”removeformat”);
}

function extended_editor_mce_buttons_3($buttons) {
// These are the buttons for third toolbar line
return array(
“image”, “separator”, “tablecontrols”, “separator”, “fullscreen”, “wordpress”);
}
?>

3. Copy the resulting advanced-wysiwyg.php file into your standard WordPress plugins directory (wp-content\plugins)

4. Copy all files from the extracted plugins subdirectory to the TinyMCE plugins subdirectory in your WordPress directory (wp-includes\js\tinymce\plugins)

5. Under ‘Plugins’ in your WordPress administrative center, ‘activate’ the Advanced WYSIWYG Editor plugin

6. Now, when you write or manage posts or pages you will have the extended TinyMCE functionality available

7. Enjoy!

Schema.org Markup

headline:
Extending TinyMCE, the WordPress Rich Text Editor

alternativeHeadline:

author:

image:

description:
NOTE: I have posted a major cleanup and update of what is now called the Advanced TinyMCE Editor, tested beginning with WP v. 2.2. Obtain the plug-in download and documentation HERE. The update announcement is now the best place to post new online comments and discussion. Let me know what you think! MKB Author’s Note: […]

articleBody:
see above

datePublished:

60 thoughts on “Extending TinyMCE, the WordPress Rich Text Editor

  1. i desperately want this (or any more robust wysiwyg editor) to work properly with wordpress but i’m about to give up and just switch blog scripts.
    anyway, the issue that i keep running across with this particular plugin is that i can’t get it to save posts……i get a “are you sure you want to navigate away from this page” message.
    i’ve tried it on 3 installs now – most recently on a clean install of wp 2.1 with no other plugins at all and no edits done other than to move some buttons from line 1 to line 2.

    any ideas and thx for ur efforts ?

  2. This is such a neat tool and when making a new post it works a treat.

    My problem is like the one teros posed above …

    When I edit an existing page and then select SAVE, I get the message “Are you sure you want to navigate away from this page”.

    If I select NO, I remain in edit (but not saved) mode.
    If I select YES, no edits are applied.

    Can anyone help?

  3. Hi Rob and Teros,

    I myself have not yet upgraded to WP 2.1 (am presently at WP 2.0.5) and since that common to both of you, I suspect the problem may reside there. It is not unusual for new WP versions to introduce bugs that then get cleaned up with the next release. I will wait until 2.1.1 or higher for my own upgrade, and then attempt to more directly address this problem should it remain.

    Thanks, Mike

  4. Looks like a wonderful plugin, and everything seems to work so far, however the icon bars are extending so far to the right that even three of the covered icons are rendered useless — the search icon, the help icon, and one between them (I can’t make out what it is, but there are dotted lines connected to an arrow pointing to a letter “B”).

    Any ideas?

    Thanks

  5. Oops, should have said the icons on the right are covered by the setting panels on the right of the Write Post editor – “Discussion – +,” “Password-Protect Post – +,” etc.

    It’s been a long week.

  6. I just installed v.2.12 and I’ve encountered the same problem as Rob and cannot apply my edits when I’ve installed the TinyMCE plugin.

  7. For those who have upgrade to 2.1.2 and are having problems the “Are you sure you want to navigate away from this page…”, I think I have a fix. The version of TinyMCE being used by WordPress is 2.0.8. I downloaded the 2.0.8 code from

    http://sourceforge.net/project/showfiles.php?group_id=103281

    Unzip or untar it, extract and use the plugins from that version instead of the ones that Mark included in his ExtendedTinyMCE.zip file. I have not tested all the plugins but it does seem to solve the problem.

  8. I am maintaining several blogs and CMS-Applications based on WordPress and an enhanced editor has been on the list for quite some time.
    One minor bug – table row props and table cell props delivered a 48px-wide-popup in Firefox 1.5, should have been 480, I discovered after clawing my way through wp-includes/js/tinymce/plugins/table/editor_plugin.js – I have no idea of how Javascript works, but got it working

  9. Yeah, this post is now way too old to be of much use. My FF is now at 92.0.1, and TinyMCE has been the native text editor on WP for quite some time.

    Mike

Leave a Reply

Your email address will not be published. Required fields are marked *