WordPress Visual Editor Changes My HTML Code

I have a love/hate relationship with WordPress’ Visual editor. The editor can be great sometimes. Other times it can be a pain. I already disable “WordPress should correct invalidly nested XHTML automatically” as their definition of nested XHTML doesn’t really cover everything XHTML supports.

So if you noticed, I’ve began to recently embed flash videos into my blog posts, something I’ve avoided doing for some time since it doesn’t really fit well with my theme, which I’m in the market of changing. Still searching for one that I’d like. I recently switched to the Green Light theme for my HD-Trailers.net Blog, but I’m not sure if I want to have that here at Krunk4Ever!

I love the fact that when you try to add an image, it’ll automatically fill in the height/width and allows me to set alignments and etc. However, for everything else, I usually use the HTML editor which allows me to put in code directly.

Anyway, today’s blog post is how frustrating the Visual Editor can be some times. The main problem started because I started embedding flash videos into my blog post. I like my webpages to be XHTML valid, and for those who have this gene, you’ll know that most flash code websites provide are XHTML invalid. I found out how to modify it. Basically the <embed>...</embed> is invalid and I have to add a few attributes to the <object> tag.

For example for this video on YouTube (Lime in the Coconut), the embed code they provide is:

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/BUG8A8e8KC0&amp;hl=en&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/BUG8A8e8KC0&amp;hl=en&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

To make it XHTML compliant, you covert it to:

<object width="425" height="344" type="application/x-shockwave-flash" data="http://www.youtube.com/v/BUG8A8e8KC0&amp;hl=en&amp;fs=1"><param name="movie" value="http://www.youtube.com/v/BUG8A8e8KC0&amp;hl=en&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/BUG8A8e8KC0&amp;hl=en&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Resulting in:

<object width="425" height="344" type="application/x-shockwave-flash" data="http://www.youtube.com/v/BUG8A8e8KC0&amp;hl=en&amp;fs=1"><param name="movie" value="http://www.youtube.com/v/BUG8A8e8KC0&amp;hl=en&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param></object>

Just for kicks, here’s the video:

If you watch House, M.D., you’d recognize this song, which was hilarious!

However, if you switch to the Visual editor and back to the HTML editor, WordPress decides that your flash code should look like this:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/BUG8A8e8KC0&hl=en&fs=1" /><embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/BUG8A8e8KC0&hl=en&fs=1" allowscriptaccess="always" allowfullscreen="true"></embed></object>

It removed my type and data attributes, stuck in the classid and codebase attributes, and then re-added the embed block back in. WordPress strives to create XHTML compliant code (hence the check to correct any invalid nested XHTML), but why re-add the embed block which is XHTML non-compliant?!?!? I found it annoying and basically the flash video would have to be the last thing I add or else the code gets “corrupted”.

I tested the newest version of WordPress (2.6.5) and this issue still exists. I found the following threads where people have been complaining about this issue:

• wysiwyg editor reformatting my HTML
• Editor Stripping (basic) HTML Code
• TinyMCE removes my HTML code in posts

It appears the WordPress folks have no plans on fixing this issue as they’re suggesting to use one or the other completely and don’t switch between editors. I’m generally okay with that approach, but on my HD-Trailers.net site, I have multiple people editing posts and can’t really enforce one editor for everyone. I have a SQL script I run every few days to fix some stuff that “disappears” after a post gets edited.

Others have suggested using a different visual editor, but it doesn’t seem that any is that great…

I have a hunch that the embed code is needed for flash to work on IE6, but if you’re surfing the web and still using IE6, you don’t deserve to see the flash content on my site. ;p

Update: Another common thing I do is insert <div align="center">...</div>, so stuff are aligned in the center, but switching between between the Visual and HTML editor removes the divs. It’s actually quite annoying.