WordPress editor has an iframe glitch

If you have been trying to paste in Amazon product iframes, then you will discover that the WYSIWYG editor in WP (provided by TinyMCE) strips out the entire Amazon html snippet that you’re trying to embed.The editor does not know how to show the iframe, so it strips it out. Argh.

WordPress configures TinyMCE (i.e. the Visual Editor) to strip IFRAME tags. So it’s not a bug per se. It’s just terribly inconvenient for those wishing to embed a product from Amazon.com, like this:

One way to stop this is to keep the post in HTML view/editing mode. Do NOT switch to Visual mode, ever, for that particular post. But this is a hassle.

A blogger posted a solution in this WordPress Forum post. It involves editing your Theme’s functions.php file. I tried it and it works well; just be careful if you every update your Theme; it likely will be overwritten.

You can also install the plugin TinyMCE ADVANCED by Andrew Ozz — it has the option in its Settings config to allow iFrame tags. Go to: http://www.laptoptips.ca/

I don’t prefer solving the problem by using this plugin, however. The TinyMCE editor is heavy already; adding 17+ new buttons and features will slow the page load times even more.

Recommendations: edit the functions.php file with the easy fix by Chip Bennett. It is:

function mytheme_tinymce_config( $init ) {

// Add IFRAME to list of valid HTML elements (so they don't get stripped)

	// IFRAME
	$valid_iframe = 'iframe[id|class|title|style|align|frameborder|height|longdesc|marginheight|marginwidth|name|scrolling|src|width]';

	// Add to extended_valid_elements if it alreay exists
	if ( isset( $init['extended_valid_elements'] ) ) {
		$init['extended_valid_elements'] .= ',' . $valid_iframe;
	} else {
		$init['extended_valid_elements'] = $valid_iframe;
	}

// Pass $init back to WordPress
	return $init;
}
add_filter('tiny_mce_before_init', 'mytheme_tinymce_config');

It works great for this blog.