TinyMCE Advanced

This plugin will let you add, remove and arrange the buttons that are shown on the Visual Editor toolbar. It includes 15 plugins for TinyMCE that are automatically enabled or disabled depending on what buttons are chosen.

Some of the features added by this plugin:

  • Support for creating and editing tables.
  • More options when inserting lists.
  • Search and Replace in the editor.
  • Ability to set Font Family and Font Size.
  • And many others.

Changelog.

Translations

The plugin’s interface is translated in only a few languages (for now), but the TinyMCE buttons and dialogs are translated in all languages supported by WordPress.

Download

The latest stable version of TinyMCE Advanced.

All previous versions are available here as well as the development version (all bug-fixes and new features would be there first).

Manual Installation

    1. Download.
    2. Unzip.
    3. Upload the “tinymce-advanced” folder to the WordPress’ plugins directory at “wp-content/plugins”. Make sure all of the plugin’s files are directly in that folder (not in a nested folder inside it).
    4. Activate the plugin.
    5. Set your button preferences at “Settings -> TinyMCE Advanced”.
    6. Try your new and improved wysiwyg editor (after clearing your browser’s cache).

How to change editor buttons

This example shows how to add the Font Sizes and Font Family drop-down buttons to the third toolbar row.

settings page
Open the settings page.
add-buttons
Drag the buttons to any toolbar row.
row-3
Font Sizes and Font Family buttons added to the third toolbar row.

And finally don’t forget to click on Save Changes 🙂

Toolbar toggle

There is a toggle button on the first toolbar row. Clicking it will reveal the additional rows you have set (if any).

toolbar-closed

toolbar-open

Frequently Asked Questions

On the admin page: cannot sort the TinyMCE buttons, they are not moving, toolbars are empty, other errors on the page…

This is usually caused by another plugin adding incompatible JavaScript library to all pages instead only where needed. The workaround is to try and find which plugin is doing that, then disable it temporarily until all TinyMCE buttons are arranged.

If that’s not the case try some general Javascript troubleshooting: clear the cache, try another browser, try another computer if possible, delete and re-upload all of the plugin’s files, and finally install Firefox with Firebug or Opera, note the first js error (important) and post it below or search the Internet to see what’s causing it.

Arranged the buttons and saved them but nothing is changed in the visual editor on the Write page.

Click on the “Uninstall” button (next to the Save button) and then on “Continue”. Then deactivate and activate the plugin again. This will reset all settings stored in the database. Also be sure to force-refresh (with Ctrl/Shift) your browser couple of times on both the plugin’s admin page and on the Write page.

Some buttons are missing from TinyMCE’s menus, or no toolbar(s) appear at all, or TinyMCE behaves strange after installing the plugin.

Almost all of these problems are caused by the browser’s cache, or network cache. Clear your browser’s cache, quit the browser, then start it and try again. If the problem persists, try reloading the page while holding down Ctrl (in IE) or Shift (in Firefox) to make the browser reload the page from the server. This can also be caused by a network cache somewhere between you and your web host. Just wait for a few hours for it to expire.

I don’t see any styles being imported in the “Styles” drop-down menu.

These styles (just the classes) are imported from your current theme’s editor-style.css file. However some themes don’t include that file. For this case follow the instructions on TinyMCE Avdanced’s settings page to add your own editor-style.css file to your theme. When defining the styles there keep in mind that TinyMCE would import only class names:

.my_class{}
.my_other_class{}

I’ve just installed this plugin, but it doesn’t do anything.

Log out of WordPress, clear your browser’s cache, quit and restart the browser and try again. If that does not work, there may be a caching proxy or network cache somewhere between you and your host. You may need to wait for a few hours until this cache expires.

When I add “Smilies”, they do not show in the editor.

The “Emotions” button in TinyMCE adds the codes for the smilies. The actual images are added by WordPress when viewing the Post/Page. Make sure the checkbox “Convert emoticons to graphics on display” in “Options -> Writing” is checked.

The plugin doesn’t add any buttons and the “Visual” and “HTML” tabs are missing.

Make sure the “Disable the visual editor when writing” checkbox under “Users->Your Profile” is unchecked.

Some of the image options (margins, CSS classes) are missing.

Try the Advanced Image Styles plugin.

1,507 thoughts on “TinyMCE Advanced”

  1. Bob, ‘_width’, ‘_margin’, ‘zoom’ are IE specific css properties that are ignored by other (standard compliant) browsers. When looking in FF’s error console, click on “Errors”, so it hides these warnings.

    Your site’s formatting depends on your theme, and is mostly defined in style.css. Have a look there and see why the “p”, “br” and “div” tags don’t get margins. To make this a bit easier you may want to install FF’s “Web Developer” plugin, or do a custom install of FF and include the “DOM Inspector”.

    I just saw your comment on Shutter Reloaded’s page. I’m glad you like it, and yes it needs improvements. I hope I’ll have the time to fix it soon.

  2. I’ve checked the error log on FF and there’s alot of unknown property ‘_width’, ‘_margin’, ‘zoom’, ‘-khtml-opacity’, and ‘filter’…. Are these normal?

    Side: are you going to futher develop your shutter reloaded plugin? It would kick ass if it can resize the images automatically…. I commented on the other side, but I’m not too sure if you read it.

    Cheers, and hope if you can help find a solution with my tinymce problem.

    PS. It seems that my formatting is out of wack on my wordpress posts… Through the editor I see the paragraph spacing / line breaks, but when viewing the site they’re gone.

    Anything would help.
    Thank you.

  3. Bob, Safari is not fully supported by TinyMCE (yet), but it should work fine in FF. Check the error console (in FF) for any javascript errors.

    Hussein, that happens because of the many new buttons being added to Tiny’s toolbars. The way around it is either to increase the resolution of your monitor, or to use full screen mode in TinyMCE.

  4. I installed the plugin, but it is expanding the size of the textarea that it is ovelapping with other elements.
    Any ideas?

  5. I did everything, and it’s still not working on either safari or mozilla.
    I’ve uploaded the plugins in the correct directory, and I am running wordpress 2.2.

    Is there anything else that could make it go wrong?

  6. Z, I’m sorry the installation instructions are a bit confusing, but the “plugins” and “themes” folders from the download go to TinyMCE’s directory – “wp-includes/js/tinymce” (for WP 2.2). Folders with the same names already exist there, so by adding the new ones, several files are updated (overwritten), allowing TinyMCE to use the new plugins.

    The “themes” folder also contains a fix for Tiny’s multi-color picker (not-working correctly in WP 2.2).

    After adding these two folders, you should see 19 subfolders in Tiny’s plugins directory, 6 original ones plus 13 new. I’ve added another screenshot showing them. Hope this helps.

  7. Plugin installed/activated, WP2.2, FireFox 2.0.0.4, NoScript disabled, cache cleared, browser reloaded, as a result the same problem as was mentioned on a 1 page by Kelly:
    “..when I click on the show/hide advanced toolbar, I don’t get anything except “| | |””
    looks like this: http://zloidivision.awarded.in/bad/tiny11.jpg

    In your response :
    #28 by admin June 1, 2007 at: 11:38 pm

    “Check to see if all the TinyMCE plugins are in the right directory: “/wp-includes/js/tinymce/plugins/“. You should see 19 subdirectories there, named after the plugins: advhr, advimage, advlink, autosave, etc.”

    Though in both versions TinyMCE Advanced for WP 2.1 and TinyMCE Advanced for WP 2.2 there are only 13 subdirectories listed :
    http://zloidivision.awarded.in/bad/tiny12.jpg

    What else might be wrong?

  8. Kelly, the 3rd row of buttons is actually part of the second row visually hidden by the “Advanced Toolbar” button. If the “Table”, “XHTML Extras” and “Layer” plugins are in the TinyMCE’s plugins directory, there’s no reason for the buttons to disappear. Try reloading the page(hold “Shift” in FF), and/or clearing the cache again (Tools->Clear Private Data, uncheck all except cache).

    David, you will have to clear the cache in FF and/or reload the page while holding “Shift”. I’m using FF 2.0.0.4 and it works fine. Also check your Add-ons in FF, there was a problem with the “No-Script” Firefox add-on and TinyMCE some time ago.

  9. I have (Win XP sp2) Wp 2.2, and use Firefox (latest). Just installed advanced TinyMCE… now have no visual editor! Just two new buttons, “Visual” + “Code” where my original “buttons used to be b4 this install! searched Wp.org forum… seems that many have same prob in past days… went over to IE 7, login to my site, all buttons show as meant to be, hence not a Server.host issue as such… more like not compatible with Ffox… so given that many can’t use this in Firefox… how does one get it to work, or at least revert back to the basic, and use “alt+shift+V) to switch tMCE on in the Visual edit mode?
    Your assitance with this issue will surely be appreciated by many, to be certain.

  10. I finally got the plugin installed. Pain in the neck because I am using the WordPress automatic updating plugin. Once I figured out how to get the extra files into the tinyMCE folder, I was OK.

    However, when I click on the show/hide advanced toolbar, I don’t get anything except “| | |”

    Am I missing something?

    Thanks!

  11. Grace, that’s very strange… I suppose you didn’t forget to activate the plugin. Check to see if all the TinyMCE plugins are in the right directory: “/wp-includes/js/tinymce/plugins/“. You should see 19 subdirectories there, named after the plugins: advhr, advimage, advlink, autosave, etc.

  12. Hello
    I’m using wordpress 2.2 and installed the plugin, cleared the cache, re-login, and closed the browser… but when I go to my “write page”, I’m still getting the old editor.

    I do not get any javascript error… Tried in both IE and FF, same problem.

    Please help?
    Thanks

  13. Tino, if the browser tries to save a page instead of displaying it, the usual reason is that the web server has crashed or php has run out of memory. Talk to your host or… change it.

  14. OK. Now I know almost everything. My problem is not connected with any plugin. It is because of the host I’m using. On different host everything is ok. But on this one… I don’t know what is going on. I did a fresh installation of WordPress and I had also this problem. So definitely it’s host fault. But what it might be?

  15. No I really don’t know what is going on. I have uninstalled your plugin. Set up everything like it was before and still I have this problem. When I am clicking insert image it opens an empty window and and the same time firefox open window to download the file image.htm. The same story with link. I don’t think it is php memory problem because it was working two days ago before I have installed your plugin.

  16. Tino, the next version of the plugin will have the option to select which plugins are loaded. You can remove some of them now, but you will need to delete the button names from the Tiny’s init array (lines 51 and 55 in the plugin). Check in Tiny’s manual to see what plugin uses which buttons.

    It looks like you are having php memory problems too. Try asking your host to increase it if possible. That probably will make everything work good. Also, try disabling the “lori” extension in FF and see if that changes something.

  17. Baris, “theList” is defined in “wp-includes/js/list-manipulation.js?ver=20070306”. Check the html source when writing/editing posts to see if this script loads before the “wp-admin/custom-fields.js?ver=3733”.

    Also, the problem may be that php runs out of memory (php memory allocated on the server). The whole “Create new Post” page is over 700KB in size, with TinyMCE at about 360KB. As php is used to output some of the js, it may be running out of memory before it could finish all. Ask your host if they can increase the memory for php and see if that helps.

Leave a Reply

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