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}