{"id":1619,"date":"2008-12-06T05:28:26","date_gmt":"2008-12-06T13:28:26","guid":{"rendered":"http:\/\/www.krunk4ever.com\/blog\/?p=1619"},"modified":"2008-12-09T20:10:35","modified_gmt":"2008-12-10T04:10:35","slug":"wordpress-visual-editor-changes-my-html-code","status":"publish","type":"post","link":"https:\/\/www.krunk4ever.com\/blog\/2008\/12\/06\/wordpress-visual-editor-changes-my-html-code\/","title":{"rendered":"WordPress Visual Editor Changes My HTML Code"},"content":{"rendered":"<p>I have a love\/hate relationship with WordPress&#8217; Visual editor. The editor can be great sometimes. Other times it can be a pain. I already disable &#8220;WordPress should correct invalidly nested XHTML automatically&#8221; as their definition of nested XHTML doesn&#8217;t really cover everything XHTML supports.<\/p>\n<p>So if you noticed, I&#8217;ve began to recently embed flash videos into my blog posts, something I&#8217;ve avoided doing for some time since it doesn&#8217;t really fit well with my theme, which I&#8217;m in the market of changing. Still searching for one that I&#8217;d like. I recently switched to the <a href=\"http:\/\/wordpress.org\/extend\/themes\/green-light\">Green Light<\/a> theme for my <a href=\"http:\/\/www.hd-trailers.net\/blog\/\">HD-Trailers.net Blog<\/a>, but I&#8217;m not sure if I want to have that here at Krunk4Ever!<\/p>\n<p>I love the fact that when you try to add an image, it&#8217;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.<\/p>\n<p>Anyway, today&#8217;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&#8217;ll know that most flash code websites provide are XHTML <strong>invalid<\/strong>. I found out how to modify it. Basically the <code>&lt;embed&gt;...&lt;\/embed&gt;<\/code> is invalid and I have to add a few attributes to the <code>&lt;object&gt;<\/code> tag.<\/p>\n<p>For example for this video on YouTube (<a href=\"http:\/\/www.youtube.com\/watch?v=BUG8A8e8KC0\">Lime in the Coconut<\/a>), the embed code they provide is:<\/p>\n<p><code>&lt;object width=\"425\" height=\"344\"&gt;&lt;param name=\"movie\" value=\"http:\/\/www.youtube.com\/v\/BUG8A8e8KC0&amp;amp;hl=en&amp;amp;fs=1\"&gt;&lt;\/param&gt;&lt;param name=\"allowFullScreen\" value=\"true\"&gt;&lt;\/param&gt;&lt;param name=\"allowscriptaccess\" value=\"always\"&gt;&lt;\/param&gt;&lt;embed src=\"http:\/\/www.youtube.com\/v\/BUG8A8e8KC0&amp;amp;hl=en&amp;amp;fs=1\" type=\"application\/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"425\" height=\"344\"&gt;&lt;\/embed&gt;&lt;\/object&gt;<\/code><\/p>\n<p>To make it XHTML compliant, you covert it to:<\/p>\n<p><code>&lt;object width=\"425\" height=\"344\" <ins datetime=\"2008-12-06T13:05:54+00:00\">type=\"application\/x-shockwave-flash\" data=\"http:\/\/www.youtube.com\/v\/BUG8A8e8KC0&amp;amp;hl=en&amp;amp;fs=1\"<\/ins>&gt;&lt;param name=\"movie\" value=\"http:\/\/www.youtube.com\/v\/BUG8A8e8KC0&amp;amp;hl=en&amp;amp;fs=1\"&gt;&lt;\/param&gt;&lt;param name=\"allowFullScreen\" value=\"true\"&gt;&lt;\/param&gt;&lt;param name=\"allowscriptaccess\" value=\"always\"&gt;&lt;\/param&gt;<del datetime=\"2008-12-06T13:05:54+00:00\">&lt;embed src=\"http:\/\/www.youtube.com\/v\/BUG8A8e8KC0&amp;amp;hl=en&amp;amp;fs=1\" type=\"application\/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"425\" height=\"344\"&gt;&lt;\/embed&gt;<\/del>&lt;\/object&gt;<\/code><\/p>\n<p>Resulting in:<\/p>\n<p><code>&lt;object width=\"425\" height=\"344\" type=\"application\/x-shockwave-flash\" data=\"http:\/\/www.youtube.com\/v\/BUG8A8e8KC0&amp;amp;hl=en&amp;amp;fs=1\"&gt;&lt;param name=\"movie\" value=\"http:\/\/www.youtube.com\/v\/BUG8A8e8KC0&amp;amp;hl=en&amp;amp;fs=1\"&gt;&lt;\/param&gt;&lt;param name=\"allowFullScreen\" value=\"true\"&gt;&lt;\/param&gt;&lt;param name=\"allowscriptaccess\" value=\"always\"&gt;&lt;\/param&gt;&lt;\/object&gt;<\/code><\/p>\n<p>Just for kicks, here&#8217;s the video:<\/p>\n<p><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><\/p>\n<p>If you watch House, M.D., you&#8217;d recognize this song, which was hilarious!<\/p>\n<p>However, if you switch to the Visual editor and back to the HTML editor, WordPress decides that your flash code should look like this:<\/p>\n<p><code>&lt;object <strong>classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\"<\/strong> width=\"425\" height=\"344\" <strong>codebase=\"http:\/\/download.macromedia.com\/pub\/shockwave\/cabs\/flash\/swflash.cab#version=6,0,40,0\"<\/strong>&gt;&lt;param name=\"allowFullScreen\" value=\"true\" \/&gt;&lt;param name=\"allowscriptaccess\" value=\"always\" \/&gt;&lt;param name=\"src\" value=\"http:\/\/www.youtube.com\/v\/BUG8A8e8KC0&amp;hl=en&amp;fs=1\" \/&gt;<strong>&lt;embed type=\"application\/x-shockwave-flash\" width=\"425\" height=\"344\" src=\"http:\/\/www.youtube.com\/v\/BUG8A8e8KC0&amp;hl=en&amp;fs=1\" allowscriptaccess=\"always\" allowfullscreen=\"true\"&gt;&lt;\/embed&gt;<\/strong>&lt;\/object&gt;<\/code><\/p>\n<p>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 &#8220;corrupted&#8221;.<\/p>\n<p>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:<\/p>\n<ul>\n<li><a href=\"http:\/\/wordpress.org\/support\/topic\/156276\">wysiwyg editor reformatting my HTML<\/a><\/li>\n<li><a href=\"http:\/\/mu.wordpress.org\/forums\/topic.php?id=10234\">Editor Stripping (basic) HTML Code<\/a><\/li>\n<li><a href=\"http:\/\/wordpress.org\/support\/topic\/202124\">TinyMCE removes my HTML code in posts<\/a><\/li>\n<\/ul>\n<p>It appears the WordPress folks have no plans on fixing this issue as they&#8217;re suggesting to use one or the other completely and don&#8217;t switch between editors. I&#8217;m generally okay with that approach, but on my HD-Trailers.net site, I have multiple people editing posts and can&#8217;t really enforce one editor for everyone. I have a SQL script I run every few days to fix some stuff that &#8220;disappears&#8221; after a post gets edited.<\/p>\n<p>Others have suggested <a href=\"http:\/\/wordpress.org\/support\/topic\/72202?replies=25\">using a different visual editor<\/a>, but it doesn&#8217;t seem that any is that great&#8230;<\/p>\n<p>I have a hunch that the embed code is needed for flash to work on IE6, but if you&#8217;re surfing the web and still using IE6, you don&#8217;t deserve to see the flash content on my site. ;p<\/p>\n<p><ins datetime=\"2008-12-06T13:49:25+00:00\"><strong>Update<\/strong><\/ins>: Another common thing I do is insert <code>&lt;div align=\"center\"&gt;...&lt;\/div&gt;<\/code>, so stuff are aligned in the center, but switching between between the Visual and HTML editor removes the divs. It&#8217;s actually quite annoying.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I have a love\/hate relationship with WordPress&#8217; Visual editor. The editor can be great sometimes. Other times it can be a pain. I already disable &#8220;WordPress should correct invalidly nested XHTML automatically&#8221; as their definition of nested XHTML doesn&#8217;t really cover everything XHTML supports. So if you noticed, I&#8217;ve began to recently embed flash videos &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.krunk4ever.com\/blog\/2008\/12\/06\/wordpress-visual-editor-changes-my-html-code\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;WordPress Visual Editor Changes My HTML Code&#8221;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[10,11],"tags":[64,527,948,947,20,949],"_links":{"self":[{"href":"https:\/\/www.krunk4ever.com\/blog\/wp-json\/wp\/v2\/posts\/1619"}],"collection":[{"href":"https:\/\/www.krunk4ever.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.krunk4ever.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.krunk4ever.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.krunk4ever.com\/blog\/wp-json\/wp\/v2\/comments?post=1619"}],"version-history":[{"count":0,"href":"https:\/\/www.krunk4ever.com\/blog\/wp-json\/wp\/v2\/posts\/1619\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.krunk4ever.com\/blog\/wp-json\/wp\/v2\/media?parent=1619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.krunk4ever.com\/blog\/wp-json\/wp\/v2\/categories?post=1619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.krunk4ever.com\/blog\/wp-json\/wp\/v2\/tags?post=1619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}