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 while editing.
  5. Support for XHTML specific tags and for (div based) layers.
  6. Support for adding inline css styles to any element.

Version 3.2: Compatibility with WordPress 2.7 and TinyMCE 3.2, minor bug fixes.

Version 3.1: Compatibility with WordPress 2.6 and TinyMCE 3.1, keeps empty paragrarhs when disabling the removal of P and BR tags, the buttons for MCImageManager and MCFileManager can be arranged (if installed).

Version 3.0.1: Added option to disable the removal of P and BR tags when saving and in the HTML editor (autop),  fixed the removal of non-default TinyMCE buttons.

Version 3.0: Compatibility with WordPress 2.5 and TinyMCE 3.0.

Version 2.2: Deactivate/Uninstall options, font size drop-down menu, other small improvements.

Version 2.1: Improved language selection, improved compatibility with WordPress 2.3 and TinyMCE 2.1.1.1, option to override some of the imported css classes and other small improvements and bugfixes.

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.

Download

The latest stable version of TinyMCE Advanced (requires WordPress 3.1).

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

  • After installing the plugin, the editor’s background is black/dark or the font is too small or all the text is centered or there are other visual glitches.

This is due to TinyMCE importing the styles from your theme and trying to make the editor look as close to your site as possible. However that doesn’t work well in some themes. To fix it uncheck the “import the css classes” option.

  • 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 style.css file. However some themes use “@import” links in the style.css to load the actual css file(s). Tiny doesn’t follow these links for now. To make the classes appear, add their names to tadv-tinymce.css file in the plugin’s folder. You don’t need to copy the whole classes, just add the names, like that:

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

  • I just added my css classes to tinymce.css but they are still missing from the editor.

Click on “Save Changes” on the admin page of the plugin, even if you did not change any buttons. This will force TinyMCE to reload the css files.

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

Update

I haven’t been able to answer many questions for the last months due to serious health problems. However it seems that many of the newer questions have been answered earlier. Please search all comments before asking.

Currently I’m working on the update for WordPress 3.1. If you would like to test it please download the Development Version.

I’m also looking for other WordPress plugins developers interested in co-authoring this plugin. I have quite a few ideas for its future development, please contact me.

1186 Comments

  • #1186 by Daniel January 27, 2012 at: 8:11 am

    WordPress 3.31 and Plugin 3.2.7. Hi 1 disabled 3.4.5 then delete the plugin dir in wp-content/plugins. I then use the upload function in my wp dashboard to install 2.2.7 …. Now just deleted the cache and my widgets have appeared in the
    HTML Editor. All good.

    Daniel

  • #1185 by Daniel January 27, 2012 at: 6:41 am

    Hi

    WordPess 3.31 + Plugin 3.4.5: yep it is broken. Currently I cannot see any toobar widets. I think it was upgraded through WPs standard auto update function. Should I remove it and install your bet as I am happy to do so. I was hoping to test the WP Sytntaxhighlighter with your plugin so anything that assists, this would be great.

    Daniel

  • #1184 by Steve B January 27, 2012 at: 3:48 am

    As a follow up to my last post….
    I deleted all traces of the latest download and reinstalled 3.2.7 which appears to work as it should with all my styles appearing in the drop down style box. This is with WP 3.31

  • #1183 by Steve B January 26, 2012 at: 12:36 pm

    Latest versions of wp and tiny mce and having same problems as all. I have duplicated all the style classes in editor-style css, ticked all the right boxes, cleared cache, cleared history, tried in Chrome and FF. Style box functions but no sign of my custom styles. Was working great previously. Hope that you are fully recovered. No child themes, complete new install.

  • #1182 by Pablo Martín January 25, 2012 at: 8:21 am

    Hi guys, I found a solution for the task “styles”. I’m working with the theme Twentyeleven and I have created a child theme. I have installed the Tiny MCE Advanced and trying to solve the visualization of styles I found a practical solution: Duplicate the classes (i.e. .orange-bold) in your “theme.css” and also in the “editor-style.css”. You’ll find the classes in the TinyMCE and also works due the theme is locating the styles callings and definitions. I hope it help you.
    See you and thanks for the plugin!

  • #1181 by Nita Gill January 20, 2012 at: 4:44 pm

    I hope your health is 100% better now.

    I just created a user as a contributor. Some of the features are missing like the font size, style and headers. Is there a way for contributors to have access to the header choices other than in HTML?

  • #1180 by Jon January 12, 2012 at: 5:53 am

    Great plugin – any idea on when the fix will be ready for editor-style.css not being recognized? Many thanks!

  • #1179 by Ant January 5, 2012 at: 4:39 pm

    Will the fix address the problem of not being able to import my css styles into the style editor?

    I think there are 2 things that I keep coming across and I’m not sure which one people are always talking about.

    I am looking for css styles to be available in the styles menu. Others seem to want their WYSIWYG editor to mimic their sites css etc.

    A.

  • #1178 by Andrew January 5, 2012 at: 8:31 am

    @Juno and all that have problems with editor-style.css not being recognized: working on a fix at the moment, will update the plugin soon.

  • #1177 by Juno January 5, 2012 at: 4:07 am

    Since the last update the editor-style.css isn’t loaded anymore. Although the file is very much present in my theme folder, TinyMCE Advanced insists that my theme isn’t set up for it. But it worked perfectly fine before the last update. I’ve tried getting help on the WordPress plugin forum but so far all I’ve found were lots of other people struggling with the same problem but no solution. Help?