Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
    
Use a page template instead? Avoids the whole issue of the editor stripping out the iframe. –  t31os Apr 9 '11 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 Apr 10 '11 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 Apr 11 '11 at 12:00
add comment

2 Answers

up vote 1 down vote accepted

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.

share|improve this answer
    
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 Apr 10 '11 at 18:52
add comment

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.

share|improve this answer
    
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 Apr 10 '11 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 Aug 31 '12 at 22:12
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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