Make WordPress WYSIWYG not strip out iframe's

Question

I have a blog that I often need to insert iframes into posts for various reasons (don't ask why just trust me!)

When I use the "visual" view to edit my posts the WYSIWYG constatantly strips out my iframes ...

I know I can keep the iframes in the post if I use the "html" view and only view/save from the "html" view ... however I'd really like to be able to use the normal WYSIWYG to edit my post without having to resort to the "html" view.

Is there anything I can do to disable this behavior? I've seen this post, that suggests editing wp-includes/js/tinymce/tiny_mce_config.php, but I'd really rather avoid doing something like that that would likely just break in a upgrade!

Answer 1

If you don't want to write your own code there is a plugin to allow embedding an <iframe>:

• Embed IFrame Plugin for WordPress

Then just use the shortcode like this:

[iframe http://example.com 400 500]

Answer 2

You can customize the filter of TinyMCE, see the following example for <iframe>s and other tags to use Google Maps inside TinyMCE.

function fb_change_mce_options( $initArray ) {

    // Comma separated string od extendes tags.
    // Command separated string of extended elements.
    $ext = 'pre[id|name|class|style],iframe[align|longdesc|name|width|height|frameborder|scrolling|marginheight|marginwidth|src]';

    if ( isset( $initArray['extended_valid_elements'] ) ) {
        $ext = ',' . $ext;
    }
    $initArray['extended_valid_elements'] = $ext;

    // Maybe, set tiny parameter verify_html
    //$initArray['verify_html'] = false;

    return $initArray;
}
add_filter( 'tiny_mce_before_init', 'fb_change_mce_options' );

Add this to an custom plugin or functions.php of the theme. Also you can read more informations in my post: http://wpengineer.com/1963/customize-wordpress-wysiwyg-editor/

Answer 3

I had to upgrade to wordpress 3.2.1 and then installed Embed Iframe and it worked great.

The iframe tages were no longer removed when switching back and forth from html to Visual in wordpress.

Answer 4

In multisite environment every user other than superadmin get html filtering (because potential security vulnerabilities). Based on this you can add Add unfiltered_html Capability to editors.

/**
 * Enable unfiltered_html capability for Editors.
 *
 * @param  array  $caps    The user's capabilities.
 * @param  string $cap     Capability name.
 * @param  int    $user_id The user ID.
 * @return array  $caps    The user's capabilities, with 'unfiltered_html' potentially added.
 */
function km_add_unfiltered_html_capability_to_editors( $caps, $cap, $user_id ) {
    if ( 'unfiltered_html' === $cap && user_can( $user_id, 'editor' ) ) {
        $caps = array( 'unfiltered_html' );
    }
    return $caps;
}
add_filter( 'map_meta_cap', 'km_add_unfiltered_html_capability_to_editors', 1, 3 );

Answer 5

If you don't like to use an additional plugin for the shortcode solution, you can add something along these lines to your theme, plugin or functions.php to add it by hand. If neccessary you might need to add some more keys to the keys-array.

add_shortcode( 'iframe' , 'mycustom_shortcode_iframe' );
function mycustom_shortcode_iframe($args, $content) {
    $keys = array("src", "width", "height", "scrolling", "marginwidth", "marginheight", "frameborder");
    $arguments = mycustom_extract_shortcode_arguments($args, $keys);
    return '<iframe ' . $arguments . '></iframe>';
}

function mycustom_extract_shortcode_arguments($args, $keys) {
    $result = "";
    foreach ($keys as $key) {
        if (isset($args[$key])) {
            $result .= $key . '="' . $args[$key] . '" ';
        }
    }
    return $result;
}

Then in your post page, usage would be like so:

[iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.de/maps?f=q&source=s_q&hl=de&geocode=&q=New+York+City,+New+York,+USA&aq=0&oq=new+york&sll=51.238455,6.81435&sspn=0.373151,1.056747&ie=UTF8&hq=&hnear=New+York+City,+New+York,+Vereinigte+Staaten&t=m&z=11&iwloc=A&output=embed"]

Answer 6

I found that using the Fusion Editor plugin to build my pages in Wordpress works well.

This video show how to use Fusion Builder (skip to 4:15 for the part about adding containers, coloumns, elements and code blocks): https://www.youtube.com/watch?v=UDyNsnB_COA

I click to add a container, then click add element, and then add a code block instead of a text block (text block will remove an iframe, but a code block will not). In my code block I paste my iframe code and publish. Works great and I don't have to modify any PHP files!