TinyMCE Advanced

TinyMCE Advanced 2 beta - admin pageThis plugin adds 16 plugins to TinyMCE, WordPress’ wysiwyg editor: Advanced hr, Advanced Image, Advanced Link, Context Menu, Emotions (Smilies), Full Screen, IESpell, Layer, Media, Nonbreaking, Print, Search and Replace, Style, Table, Visual Characters and XHTML Extras. Together these plugins can add over 40 new buttons to the toolbar, which is now two rows plus one hidden row. Some of the new features added by this plugin are:

  1. Font size and font family selection.
  2. Support for making and editing tables.
  3. Advanced list and image dialogs that offer a lot of options.
  4. Search and Replace.
  5. Support for XHTML specific tags and for (div based) layers.
  6. Support for adding and editing inline css styles to any element.

Changelog.

Translations

The plugin’s interface in only in English, but the TinyMCE plugins include several translations: French, German, Spanish, Italian, Portuguese, Russian, Japanese and Chinese. Additional translations can be downloaded from TinyMCE’s site. Each language file has to be added to the corresponding directory of each of the TinyMCE plugins in tinymce-advanced/mce. For example to add another language file for the “advlink” plugin, the file has to be in tinymce-advanced/mce/advlink/langs. For the “table” plugin, the file has to go to tinymce-advanced/mce/table/langs, etc. Note that these files would have to be (manually) updated after each update of the plugin.

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).

Screenshots

Standard toolbarExtended toolbarFullscreen modeThe inline styles dialog box

Manual Installation (for version 2.0 and newer)

  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 preferences at “Settings -> TinyMCE Advanced” or “Manage -> TinyMCE Advanced” for WordPress 2.6 and older.
  6. Try your new and improved wysiwyg editor (after clearing your browser’s cache).

Upgrading from version 2.0+

  1. Deactivate the old version.
  2. Delete the “tinymce-advanced” folder from WordPress’ plugins directory.
  3. Follow the above steps to install the new version.

Upgrading from version 1.0 or 1.0.1

This version of TinyMCE Advanced is self-contained. It does not require separate installation of TinyMCE plugins. If you have one of the (very old) versions 1.0 or 1.0.1 installed, please follow these steps:

  1. Deactivat the old TinyMCE Advanced.
  2. Backup the TinyMCE plugins folder, located at wp-includes/js/tinymce/plugins.
  3. Delete the following TinyMCE plugins that were added when installing the previous version (delete the directories with these names from wp-includes/js/tinymce/plugins):
    • advhr
    • contextmenu
    • print
    • visualchars
    • advimage
    • advlink
    • table
    • xhtmlxtras
    • nonbreaking
    • layer
    • searchreplace
    • fullscreen
  4. After deleting the above plugins, you should have the 7 default plugins that came with WordPress: autosave, directionality, inlinepopups, paste, spellchecker, wordpress, wphelp. Or if you prefer, delete the whole tinymce plugins directory (wp-includes/js/tinymce/plugins) and upload a fresh copy from the WordPress installation package.
  5. Delete the tinymce-advanced folder from WordPress plugins directory (wp-includes/plugins).
  6. Follow the installation instructions above to install the new version.

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.

 

1210 Comments

  • #1210 by Cindy Eberle May 17, 2012 at: 11:11 am

    Using WordPress 3.3.1. Suddenly all editor links are not working.
    I select word, and go to chain icon, but nothing happens when I click it. It was working fine. I have tried different themes and deactivating plug ins, but no luck. I have cleared my cache and deleted my cookies. I am using another editor plug in for widgets,
    Black Studio tiny mce widgets, which WAS working fine but suddenly the same problem in Black Studio and regular page editor. Any ideas? I am really stumped.

  • #1209 by Robert May 13, 2012 at: 2:30 am

    This plugin is great. Two suggestions and two questions:

    1. The comment search on this page appears to be broken. The page just refreshes and the comments section doesn’t change.

    2. The comments on this page would be much more user-friendly if there were a “View All” option beside “Next”

    3. It seems the default option cause the icons to spill onto the second column of the editor page at the standard browser width of 1024 pixels. Could the defaults be updated so one doesn’t have to modify the icons every time the plugin is installed?

    4. Is there a way to export the icon choices and layout so it can be used on other WordPress sites?This plugin is great. Two suggestions and two questions:

    1. The comment search on this page appears to be broken. The page just refreshes and the comments section doesn’t change.

    2. The comments on this page would be much more user-friendly if there were a “View All” option beside “Next”

    3. It seems the default option cause the icons to spill onto the second column of the editor page at the standard browser width of 1024 pixels. Could the defaults be updated so one doesn’t have to modify the icons every time the plugin is installed?

    4. Is there a way to export the icon choices and layout so it can be used on other WordPress sites?

    Thanks!

  • #1208 by Mark May 6, 2012 at: 5:07 am

    Hi, I’m sure it’s been asked before but I can’t find the answer. I’ve added my own classes to the style menu and now want to delete/remove the default classes (wpGallery etc). How do I do that, please?

  • #1207 by Chris Booth April 18, 2012 at: 8:20 am

    Many thanks for a most useful plugin!
    Just spotted a little typo on the settings page, Advanced Options section: ‘Cuttently there is no way to enable both of them at the same time.’ should read ‘Currently …’

  • #1206 by Kathleen March 31, 2012 at: 1:00 pm

    Hi – I’ve installed TinyMCE Advanced on two different themes. The editors were easy to set up.

    I’ve tried the tables, and while the basic layout works, the table borders don’t show when the post is published, and the table won’t center – it always appears left flush.

    Is there anything I could do to fix those issues? Thanks.

  • #1205 by laoyu March 22, 2012 at: 10:40 pm

    hi, I would like to insert flash games, and let the game centered on the page, but inserted the code does not seem to use css to control , is not able to insert the code into a <object… , or there is other way to get the flash centered?

  • #1204 by Cathy Keller March 21, 2012 at: 11:50 am

    I have tried all the suggestions (logout/clear cache/wait several hours) and I do not see the additional buttons for TinyMCE in the editor. What’s next?

  • #1203 by Ian March 19, 2012 at: 11:11 am

    In Google Chrome, the styles only appear for the first load of the editor after clearing my cache, go to another page/post and you only get wpgallery and wp-oembed classes. It seems to work fine in Firefox. Is this something you are aware off? Do you know if there is a way of fixing this?

    Great plugin none the less. Thanks

  • #1202 by Brent Williamz March 17, 2012 at: 6:11 pm

    Andrew, I’ve added TinyMCE Advanced to one of our sites & it makes it so much easier with content creation & formatting, thanks for that. IMO, WordPress users are crippled without it.

    I’d like to install the plugin on other sites as the need arises. It’s a bit of a fiddle following a screen capture — of the custom set — to drag & drop buttons each time per website’s TMCEA plugin. Is there an EASY WAY to export the new button bar’s settings to our next couple of sites?

    NOTE: I’m not a real code-based person so, “Go here, do this then that, then go there & finish-click,” makes much more sense to me than, “Well, with {&*^} and [?+=] on line 297 will work.”

    Cheers
    Brent Wz

    PS Where’s your Donate link, mate?

  • #1201 by Fionne March 7, 2012 at: 12:14 am

    Not sure why, custom style doesn’t work at all for my new website. Tried so many things, but display nothing.
    I never experience this before for my other websites…