Keep HTML format when switching from Visual to HTML editor

I’ve been looking around for a solution that will allow me to edit HTML code and have it remain after a switch to the Visual editor and back.

I’ve tried a bunch of things with no luck:

Read More
  • the wp-no-format plugin
  • the Raw HTML plugin
  • entering all my HTML on one line

If it were just me managing the content, I would disable the Visual editor. But as I have a number of content managers, and pages on which there is HTML (forms, for example) and content that they need to edit, that’s no an option.

Any suggestions will be greatly appreciated.

Related posts

Leave a Reply

6 comments

  1. I know exactly how you feel, and sadly this problem is rooted in the wordpress core code not in TinyMCE or due to browser compatility problems. I wrote a plugin that allows you to format html markup in the HTML editor, switch back and forth between it and the Visual tab without affecting the source code, and make changes in the Visual tab without breaking the original HTML formatting…

    http://wordpress.org/extend/plugins/preserved-html-editor-markup/

    It also preserves tabbed indentations – 4 spaces only 🙁 – and it enhances HTML5 compatibility.

    The only “pitfall” is that it disables wpautop. I quote pitfall because some people hate that the editor wraps p tags around their content, as a result the Visual editor will use br tags for carriage returns instead – so you may need to adjust your stylesheets.

    Enjoy!

  2. If there are only sections of code that you don’t want mangled, you could alternatively store that sensitive HTML / embed / etc into custom fields.

    By use of this shortcode plugin, you could include the custom fields RAW inside any post, page or even widget with something like: [include “my custom field name”]. It also can pull common snippets from other posts with something like [include global=”shared_code_menu”].

    It’s a cheap alternative and has limitations, but it’s lightweight and straight-forward.

    http://pp19dd.com/wordpress-plugin-include-custom-field/

  3. Add this to your functions.php

    function wp_tiny_mce_sanitize_fix( $init )
    {
        $init['extended_valid_elements'] = 'div[*], article[*], span[*], p[*]';
        $init['remove_linebreaks'] = false;
        $init['convert_newlines_to_brs'] = true;
        $init['remove_redundant_brs'] = false;
        return $init;
    }
    add_filter( 'tiny_mce_before_init', 'wp_tiny_mce_sanitize_fix' );