Switching From HTML to Visual Editor and Back Completely Strips Page Contents

1 Views

I have a page (not a blog post) I need to embed an iframe on (it’s to “integrate” an external service’s product catalog). I added the iframe code in the raw HTML editor and saved the page. I viewed the page, everything worked.

I went back to the editor and switched from raw HTML to the Visual editor tab, added a line of text, and then remembered I needed to add an attribute to the iframe code. So I switched back to the raw HTML tab.

Read More

When I did this, the post is completely empty. Everything I’d entered in the editor in raw HTML or not was stripped out and the post is blank, like I’d just created it new. I had to roll back to a revision to recover it.

So far the solution has been to disable the Visual editor, but I have a non technical partner and that isn’t an ideal long term solution.

Is there any way to control this behavior of WordPress? I’m using WordPress 3.1.1

Thanks

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. I’ve had this code in a custom local plugin for a while. Or you could just stick it in your theme’s functions.php:

    // Allow iframe in TinyMCE
function tinymce_add_iframe( $arr = array() ) {
  $extra = 'iframe[id|class|title|style|align|frameborder|height|longdesc|marginheight|marginwidth|name|scrolling|src|width]';

  if ( isset( $arr['extended_valid_elements'] ) ) {
    // append to existing value
    $arr['extended_valid_elements'] .= ',' . $extra;
  } else {
    // set the value
    $arr['extended_valid_elements'] = $extra;
  }

  return $arr;
}

add_filter('tiny_mce_before_init','tinymce_add_iframe');

    This tells TinyMCE (the visual editor) to allow the iframe tag and all of its attributes.

  2. The WordPress editor has poor handling of iFrames or advanced HTML when switching between the HTML and Visual editor (I’ve experienced this problem many times).

    Your best bet is to either add a page template (page-{id}.php) with the iframe, or to use a plugin that adds iFrame shortcodes like the following:

    http://wordpress.org/extend/plugins/easy-iframe-loader/

    This would be especially useful in an environment with non-technical people editing the posts.