1

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.

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

Improve this question
3
  • Use a page template instead? Avoids the whole issue of the editor stripping out the iframe.
    – t31os
    Commented Apr 9, 2011 at 16:49
  • This is not specific to pages -- same thing would happen to a post. I removed the page tag and added an html tag.
    – Dougal Campbell
    Commented Apr 10, 2011 at 13:35
  • Yes i realise that, my point was that this user wants to specifically render an iframe in a page, and using a named page template would totally avoid the problem.
    – t31os
    Commented Apr 11, 2011 at 12:00

2 Answers 2

Reset to default
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.

Improve this answer
1
  • This is my preferred type of solution. You should package this as a plugin and upload it to the extensions directory ;) Seems to work pretty well (I added it to functions.php instead of creating a plugin). Thanks!
    – red4d
    Commented Apr 10, 2011 at 18:52
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.

Improve this answer
2
  • This was my second choice -- I didn't go with it maninly because I didn't want to go with shortcodes. Does anyone besides me wish TinyMCE/WordPress would just take the HTML you enter and leave it alone?
    – red4d
    Commented Apr 10, 2011 at 18:55
  • @red4d - My plugin will do exactly what you wish WordPress to do. I wished for the same behavior, just like you, and found that it was possible with a lot of gritty work in the WP Core - wordpress.org/extend/plugins/preserved-html-editor-markup
    – Marcus Pope
    Commented Aug 31, 2012 at 22:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.