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.

 

1295 Comments

  • #1295 by joe arrigfo May 14, 2013 at: 1:47 pm

    Installed your Ultimate TinyMSE plug-in to my WordPress. The drop=down window for fonts did not appear. The window for font size was already there, but it did modify it slightly by adding more sizes. How can I get the fonts window to appear. Plead advise.

  • #1294 by Andrew May 11, 2013 at: 11:10 am

    @Robin you have to be an “admin” or “editor” level user on a non-multisite install for this to work. On multisite or for lower level users the scripts are removed when saving a post.

    @Mike you can change the font families in the TinyMCE settings, this can help.

    @Lauren it is a very simple theme with customized colors :)

    @Dana Trentini sounds like either your blog doesn’t use UTF-8 encoding or the font used in the theme doesn’t have all the UTF characters.

    @Dale Fletcher did you try adding the blockquote button to any toolbar?

    @Simongcc the only rule is that only simple css classes are imported into the editor’s menus, i.e. .classname {color:red;}. For a better result try adding the classes directly to the editor settings (with the above mentioned plugin).

    @Lucian Dixon sounds like css problem. Perhaps editor-style.css in the theme conflicts with another css file loaded in the editor? Or a css file got corrupted (very rare but not impossible). To troubleshoot this look at the editor content with the browser tools (F12 in Chrome and IE, Firebug in Firefox) and check where the styles applied to the content come from. Bear in mind that you will need to delete the browser’s cache frequently while looking into that.

  • #1293 by Lucian Dixon May 7, 2013 at: 10:33 pm

    We have used TinyMCE Advanced for several years now on The Political Carnival and it has worked just fine. It has everything we need. Recently, however, for, say, the past few weeks, we have a real problem with the Visual Editor. It does not reflect indents or bolding or blockquotes, etc. The HTML code shows that the indents have been applied (or the blockquotes or the bolding) and we can see them when we check the preview – and they’re there on the posts – but the Visual Editor itselfdoes not show any change.

    Does anyone have any idea what could be causing this?

    The TinyMCE Advanced version is 3.5.8. WordPress is at 3.5.1. The problem is the same in Chrome and Firefox on Windows 7 machines (three different ones in different parts of the country. The site is hosted on RackSpace and we’ve had no problem with the hosting whatsoever since nearly a year ago. It’s on Cloud Sites (their managed hosting) and neither they nor I have made any server-related changes. I did install a new theme but we had the problem with the previous theme before I installed the new one. We were hoping the new theme might clear up the problem but it did not.

    I’ve deactivated and uninstalled the plugin plus deleted the files several times but there’s no change when I reinstall and reactivate it.

    Will appreciate any help anyone might be willing to give me.

  • #1292 by Simongcc May 2, 2013 at: 5:59 pm

    about the editor-style.css

    Is there any special rules for this?
    I have tried some test. And naming and position of the classes seems matters.
    Any help is appreciated. Much thanks for great work!

    eg.
    Name
    .my_class{} work
    .myclass{{} not being recongized and will hide all other custom classes
    .my-class{} work

    Position
    when putting the class in different section, it does not being recognized
    eg. in alignment section, I put
    .my-class{} not being recongized and will hide all other custom classes

  • #1291 by Form Generator PHP Generator M May 2, 2013 at: 9:22 am

    Works like a charm! Thanks for sharing. Appreciate it!

  • #1290 by Dale Fletcher April 25, 2013 at: 7:37 am

    When I activate the plugin, the Blockquote button ( ” ) seem to disappear from the menu. Are you aware of this? Is there a fix?

    Thanks

  • #1289 by Dana Trentini March 27, 2013 at: 9:58 am

    My blog is on WordPress.org and I have the TinyMCE plugin. My posts are in English, however I would like to add posts to my blog translated into different languages. For example, I have one article translated in Japanese by a friend on Word, but when I cut and paste it on my blog, the Japanese characters do not appear when I preview it just ?????? appears. If I use the TinyMCE Advanced plugin will I be able to cut and paste text in languages such as Japanese and Mandarin Chinese onto my blog?

  • #1288 by Lauren March 26, 2013 at: 4:49 pm

    Hi, I was wondering what the wordpress theme you’re using on this blog is? I find it very interesting, nice layout and colors. Thanks

  • #1287 by Kredi Kartı Taksitlendirme March 26, 2013 at: 1:23 am

    Merhabalar, WordPress e Bunu Kurtmak İstiyorum, Fakat Kutmuyor, hata veriyor, Site Bakımdadır diyor, sitem de duruyor, 3 5 dakika sonra site düzeliyor, bu eklentiler de iki tane tinmce var ikisi de aynımıdır ?

  • #1286 by Mike March 16, 2013 at: 10:38 pm

    Hi … I’ve installed and it all works except I can’t see how to change the font family … also many of the other buttons from the screen shots are missing …. help please :)