TinyMCE Strips Out Code in Joomla

I like the TinyMCE editor except for the fact that it strips out some code when you edit HTML. Like you go to the trouble of adding something like:

<div class="mystyle">text</div>

you save it, and return to find that TinyMCE has stripped out the class attribute leaving you with:

<div>text</div>

The good news is that we can fix all that by using Extended Valid Elements.

Extended Valid Elements to the Rescue

In the Joomla backend go to Extensions > Plugin Manager > Editor - TinyMCE. You can leave the editor functionality set to Advanced. Scroll down until you find the textarea for Extended Valid Elements, its should be empty as you can see below.

The trick here is to put back the elements and attributes that TinyMCE is determined to strip out. So if you want to be able to use
<div class="mystyle">
and also <img class="somestyle" /> and also <span> then you would use the following format separating the elements with a comma:

div[attr1 | attr2 | attr3], img[attr1|attr2], span[attr]

What I mostly put into Extended Valid Elements takes care of any attributes I want to use with div, img and span, but of course you can add more. Notice no line breaks:

div[id|name|style|class|onclick|onmouseover|onmouseout],span[id|class|style],img[
class|src|border|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout
|name]

Why all the Attributes?

The reason to use so many attributes is according to TinyMCE:
When adding a new attribute by specifying an existing element rule (e.g. img), the entire rule for that element is over-ridden so be sure to include all valid attributes not just the one you wish to add.

If you want to find all the valid attributes, you can do so here: http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/valid_elements

Warning: Watch out for Line Breaks when Pasting!

If you have any line breaks in what you paste into Extended Valid Elements, you'll end up with a heap of problems and it might even break TinyMCE. Be sure to paste with no line breaks! If you've done it wrong, you might see \n appearing in the Extended Valid Elements textarea. You can try to get rid of them, but the textarea is so small you usually end up creating even more problems.

If things still don't work, close out of the plugin and use something like phpMyAdmin and locate the jos_plugins table. Click on Editor - TinyMCE and look at the params row. You can actually correct it from here. Scroll down the params until you reach extended_elements. Remove any \n (newlines) and/or duplicate elements. You can leave the pipe escapes (\|) alone, they're ok and won't do any harm. This is what it should look like when you're done:

...other params above
extended_elements=div[id\|style\|class\|onclick\|onmouseover\|onmouseout],span[id\|class\|style], img[class\|src\|border\|alt\|title\|hspace\|vspace\| width\|height\|align\|onmouseover\|onmouseout\|name]
...more params below

Click Save, then try it again. TinyMCE is now ready to rock!