Users of TinyMCE 3.4.1 and below should update to TinyMCE 3.4.2 to fix a number of compatibility issues with Internet Explorer.

I’ve noticed that TinyMCE 3.4.1 breaks in Internet Explorer 7 and Internet Explorer 8 with any pages with content using CSS float. For instance, if you have floating left or right DIVs on a page, the content won’t be selectable.

TinyMCE 3.4.2:
http://tinymce.moxiecode.com/download/download.php

By default, TinyMCE only accepts icons that are 20px by 20px in the toolbar. If you want to make a customized toolbar icon that is wider than 20 pixels, you will need to edit the ui.css in TinyMCE. I find this useful for adding custom TinyMCE plugins/etc.

Edit the ui.css (tiny_mce/themes/advanced/skins/default/ui.css) and change the following values:
Replace the “width:20px; height:20px;” with “min-width:20px; height:20px;”. The min-width value will allow for wider icons to be added as well as setting the default width to 20px if one isn’t specified.

TinyMCE is a great WYSIWYG editor, but sometimes there are cases where it removes HTML tags when you go into the “HTML Source” mode and switch back to the editor. This is very frustrating to end-users.

By default, TinyMCE will remove a lot of HTML tags including empty ones (such has having a DIV spacer), select options, certain styles, etc. To get around this, you will need to change the option “extended_valid_elements”, which is before the setup : function(ed) line. Note: This will allow your users to add in any kind of HTML tags they want. Replace the “extended_valid_elements” line with:…..

The Tiny MCE editor has some restrictions on what types of form elements can be used. The form name=”[OBJECT"] bug, early /form tags getting added in the form, and certain form elements getting deleted.

In order to make icons wider in TinyMCE, you will need to remove the default width on the mceIcon class. Its forced at 20px, which limits all icons to be square.

To make the change, go to your ui.css file
For advanced theme users, its located in themes/advanced/skils/default/ui.css

In Version 3.2.2.1, its line 30:
.defaultSkin span.mceIcon, .defaultSkin img.mceIcon {display:block; width:20px; height:20px}

The line should be changed to:
.defaultSkin span.mceIcon, .defaultSkin img.mceIcon {display:block; height:20px}


Next, you will need to define your custom button when initializing TinyMCE.

To make the change, go to your ui.css file
For advanced theme users, its located in themes/advanced/skils/default/ui.css

In Version 3.2.2.1, its line 30:
.defaultSkin span.mceIcon, .defaultSkin img.mceIcon {display:block; width:20px; height:20px}