wysiwyg editor reformatting my HTML (23 posts)

  1. wordpressbob
    Posted 8 years ago #

    Why does the WYSIWYG editor in WordPress reformat and screw up my HTML in my posts?

    After writing the post, I find a typo, I go to Manage>edit and it takes out all my <p> tags and runs all my sentences together.

    I've been having to hack by using Dreamweaver as my editor and then having to cut and paste in code view. Its frustrating that I cannot trust my WordPress editor to edit it.

    I'm using Firefox 2 on both PC and Mac and Safari on Mac.

    What can I do?

  2. biker3
    Posted 8 years ago #

    I can't understand why this problem. I'm with WordPress 2.5, where it says

    ...a WYSIWYG that doesn’t mess with your code...

    but if I write in a post this:

    <object width="425" height="350" data="http://en.sevenload.com/pl/MuSJRtd/425x350/swf" type="application/x-shockwave-flash">
    <param name="FlashVars" value="apiHost=api.sevenload.com" />
    <param name="AllowScriptAccess" value="always" />
    <param name="movie" value="http://en.sevenload.com/pl/MuSJRtd/425x350/swf" />
    <param name="allowfullscreen" value="true" />

    (valid code from XHTML 1.1)

    why if I go to edit it, them "someone" has chaged it for:

    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="350" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
    <param name="FlashVars" value="apiHost=api.sevenload.com" />
    <param name="AllowScriptAccess" value="always" />
    <param name="allowfullscreen" value="true" />
    <param name="src" value="http://en.sevenload.com/pl/MuSJRtd/425x350/swf" />
    <embed type="application/x-shockwave-flash" width="425" height="350" src="http://en.sevenload.com/pl/MuSJRtd/425x350/swf" allowfullscreen="true" allowscriptaccess="always" flashvars="apiHost=api.sevenload.com">

    finally, with WordPress 2.5 also I have to disable visual editor for write and edit posts without strange changes :(

  3. wonderfullyrich
    Posted 8 years ago #


    How did you disable the visual editor? I'm still experiencing problems with 2.5 messing with my code and am a little pissed about it.


  4. planetim
    Posted 8 years ago #

    I just found out today. When I switch from visual to html to insert some code save and go back to visual it cuts up the inserted code. If you have inserted code you cannot go back and forth between visual and html. Serious pain! Does anyone know if anything is being done about this?

  5. lilqhgal
    Posted 8 years ago #

    I have to second this option. I've searched for about a half hour here in the WP support forum but haven't seen an answer to this yet. I'm running 2.5.1 and in my opinion, the HTML option should be just that -- completely open to html editing. If I screw it up, its my fault. Maybe in the admin options, where you can uncheck the visual editor per user, why not have an uncheck html editor for those who don't need to use it (most of my users NEED the visual editor).

  6. iridiax
    Posted 8 years ago #

    Do not use the visual editor if you want to edit your own code. The visual editor is only for code-phobic newbies. Switching back and forth between code view and the visual editor will only cause you problems and mangle your custom code. The visual and code editors have different ways of doing things, and going back and forth between the two types of editors can cause code errors to accumulate.

    I use only the code view and then repeatedly preview my saved (but unpublished) post to see exactly how my code looks visually.

  7. vizthink
    Posted 8 years ago #

    Hey all,

    I recently came across this thread in search of a solution for symptoms that most closely resemble planetim's post.

    iridiax - while I agree with and often practice what you preach, the content on our blog is occasionally authored by multiple people. So, not everyone in our group has the desire or experience to use straight HTML. In this scenario and under certain circumstances, straight HTML code added by one person may 'vanish' as a result of another author merely fixing a typo through the tinyMCE editor.

    Up until now, this has not been a real problem with the one exception of iframes (a common solution for adding custom/ external content that I'm sure most folks here are familiar with).

    Well, we recently stepped up to WordPress 2.5.1 and have been running smoothly until a need arose to post something with an iframe that would wrap some media content.

    In short, what used to work in sub 2.5 WordPress would no longer be displayed correctly once an HTML post was revised with the tinyMCE editor .

    Considering this a step back, I dug in and found a fairly forceful solution that meets our needs. Still, I felt it was relevant enough to share with the other folks out there who may have experienced the same frustrations I did.

    Let me be clear - I am VERY aware that this is not the proper way to accomplish my goal. In fact, I encourage a more experienced user to enlighten us all with an approach that is easier to apply and has less potential for adverse effects.

    And of course - as I just stated, the procedure below changes the intended function of the tinyMCE editor in WordPress and could cause irreversible damage to your blog. Therefore, consider the following for informational / discussion purposes only and proceed at your own risk:

    1. Locate the file 'tiny_mce_config.php' ( it should live in %your_blog_root%/wp-includes/js/tinymce/ )
    2. Assuming you want to avoid catastrophe if things go awry, back this file up!
    3. Open this file in any text editor and locate the following code ( Line 298 for me )
    4. // Add external plugins and init
      $content .= $ext_plugins . 'tinyMCE.init({' . $mce_options . '});';
    5. Replace with this ( or a variation to suit your own needs )
    6. // Add external plugins and init
      $content .= $ext_plugins . 'tinyMCE.init({extended_valid_elements : "iframe[id|class|title|style|align|frameborder|height|longdesc|marginheight|marginwidth|name|scrolling|src|width]",' . $mce_options . '});';
    7. Save the file back to its original location
    8. Clear your browser cache ( for good measure )
    9. While technically unnecessary, you can also delete or rename the folder 'js_cache' ( it should live in %your_blog_root%/wp-content/uploads/ )
    10. Test your new settings with the desired code by toggling back and forth between the 'Visual' and 'HTML' tabs at least once. Return back to the HTML view to verify the code is still there and finally back to the 'Visual' tab to save/publish a test post.

    That worked in my situation, I hope it helps other folks here apply a good temporary fix to a problem that should be addressed in later versions.

    Something, anything - even a simple tag like:

    {ignore_this} bunch of stuff {/ignore_this}

    might encapsulate code that should be ignored by all the various levels of HTML cleanup. And yes, I realize this creates potential problems that the good folks at WordPress were probably trying to avoid.

    Anyone want to write a plugin?



  8. Soulplayer
    Posted 8 years ago #


    This fixed the problem for me with Advanced TinyMCE, but I still don't see the second line of formatting tools. Does anybody has a fix for that?

    Thank you

  9. chrisbirchall
    Posted 8 years ago #

    Vizthink: You are a Gentleman, a Scholar and a Star. (if, however, you happen to be female, please feel free to alter the first of those honorary titles)

    You have just saved me the arduous task of having to backup my posts to Notepad for fear of losing my iframes code by opening in the visual editor - and from the frustration of constantly forgetting to do so!

    I am using iframes to display google maps and will also be using them to display Lightroom image galleries. This Visual Editor bug was a real pain. Hopefully it will be fixed in the next update.

    Thanks again for the tip.


  10. vizthink
    Posted 8 years ago #


    Sadly, I have no input on your issues with the Advanced TinyMCE buttons - although keep searching, I have seen some thingss floating in these forums that may pertain to your particular issue.


    Awesome! Glad its working and solved your problems (at least for the short term). Your initial guess was right, so you can continue to call me a Gentleman :)


  11. highmtnn
    Posted 8 years ago #

    I had the same issue, banged my head against computer then found the wp-unformatted plugin, installed and it works perfectly, and is 2.5 compatible.


  12. chrisbirchall
    Posted 8 years ago #

    Hmmm. Just did the 2.6 upgrade hoping all this would go away.

    Same old same old...

    Worse in fact. The WP2.6 editor still chews up the code when you have an iframe on the page. But now even the above "fix" doesn't fix it!

    I've just restored my 2.5.1 backup files and I'm sticking with it until Matt and his gurus come up with an editor that behaves itself.

  13. rawalex
    Posted 8 years ago #

    Long ago I learned to turn off the visual editor and work without it. It mangles code, it double encodes UTF-8 to the rss feeds. The visual editor should put out EXACTLY the same code that the html editor does, with the same encoding, but it does not.

    Just disable that visual editor and don't ever go back there. You will be happier.

  14. chrisbirchall
    Posted 8 years ago #

    Sure that's an option. However, the whole point of using the likes of WordPress as CMS is to get away from hacking about with HTML - otherwise we might as well have all stuck with Front Page!

    I don't pretend to be a coder, so I wonder if Vixthink or anyone else can come up with a variation of the iframe fix that will work in WP2.6?

  15. sandg
    Posted 8 years ago #

    i tried vizthink's solution and put the iframe codes within iframe code here, switched to visual, happy that the iframe works, switched back to HTML for good measure..it didn't eat up the coding but converted it to
    <code><br /> If you can see this, your browser doesn't<br /> understand IFRAME. However, we'll still<br /> <A HREF="hello.html" mce_HREF="hello.html">link</A><br /> you to the file.<br /> </code>

    did i miss out anything? will try wp-unformatted plugin next..sigh

  16. chrisbirchall
    Posted 8 years ago #

    It worked fine for me in WP 2.5.1 Upon upgrading to 2.6 the problem reared its ugly head once more. The wp-unformatted didn't help either.

    I just hope someone will come up with an answer that will work in the latest version.

  17. sandg
    Posted 8 years ago #

    Sorry, the code actually become like this. Pasted the wrong Visual version earlier.
    <code><br /> If you can see this, your browser doesn't<br /> understand IFRAME. However, we'll still<br /> <A HREF="hello.html" mce_HREF="hello.html">link</A><br /> you to the file.<br /> </code>

    Using WPMU 1.5.1

  18. guno
    Posted 7 years ago #

    I still can't believe this hasn't been fixed yet. I've been racking my brain for over an hour trying to get this solved. I've even turned off the visual editor and it still ignores some of my coding. All the plugins I tried do not work with the newer 2.6.2. Looks like I will be reverting back to an older version that actually "works".

  19. Czymra
    Posted 7 years ago #

    This is extremely silly. I'm all with Vizthink. We have the exact same issue here. I would be delighted if there was some solution.
    We also use opening and closing divs to call jQuery commands that sometimes get eaten up as well.
    Did anyone ever try this plugin and see if it has any effect on the issue?


  20. Saurus
    Posted 7 years ago #

    Read enough of the answers by support staff at WP and you will quickly get the idea that it doesn't matter what you want things to work like - it's what they think you should do.

    Just sayin.

  21. krunk
    Posted 7 years ago #

    I've been hitting this problem too and the worse thing is I want to insert XHTML compliant flash code, but when swapping between the visual editor and html editor, it adds <embed> which isn't XHTML compliant...

    I would like to see this fixed also.

  22. VeryCheeky
    Posted 7 years ago #

    Here is my solution, Microsoft Live Writer

    I would actually disable the visual editor for current user in wordpress and get used to working in the code view environment in WordPress.

    Why? You will learn code and it will make things easier when you are tying to troubleshoot format issues, tweak themes ect. keeps you sharp, especially if you broke up with Dreamweaver and embraced WordPress press Like I did! (well not entirely)

    OK... Here is what I DO..

    • ► Cut code from post and Past Code into LIVE WRITER code View
    • ► switch to Edit view in Live Writer ( WYSIWYG )
    • ► Edit away! return will add a <p> before and </p> after each
      paragraph, you can easily add a rel nofollow and title for links, easily add alt title and text, etc plugins, add youtube video etc etc and NO I don't work for microsoft!
    • ► Switch back to Code View
    • ► ctrl+a » ctrl+x
    • ► go back to WordPress post and = ctrl+v
    • Oh yea.. Keep it simple

    Wordress and Microsoft Rock!

    M@ http://broadbeachaustralia.com

  23. chrisbirchall
    Posted 7 years ago #

    The solution I found was the TinyMCE Vadid Elements plug-in: http://www.engfers.com/2008/11/06/new-wordpress-plugin-tinymce-valid-elements/
    This allows you to add the elements of code you DON'T want the editor to strip out. In my case it was the iframes tags. You just add these at the interface, along with any other tags that would appear within the iframes code, and PRESTO! you can flip between HTML view and Visual to your heart's content.


Topic Closed

This topic has been closed to new replies.

About this Topic