16

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!

  • Post you linked to also has non-edit filter solution by Otto. Had you tried that? – Rarst Oct 19 '10 at 7:25
  • To clarify a little more, I'd rather not have to hack up some PHP to do it (I'd likely forget about, upgrade and break stuff) ... if it's a settings thing (even if that IS in PHP) or something I can do by say, wrapping a bit of code around my iframe that'd work too. At this point I'm likely going to just use some javascript to do it, but that seems messy. – Justin Jenkins Oct 19 '10 at 7:28
  • 1
    There is no configuration option for this, and no way to code around it in the editor (it would be a security hole if a workaround existed). Putting the mentioned code in a plugin is the best way to do this, and it will also survive upgrades (plugins are not deleted when you upgrade). – Jan Fabry Oct 19 '10 at 8:58
  • @Jan, Holding out hope there is someone that knows something we don't know ... If not, thanks. Seems odd that it's a sec hole only on the visual part, not the HTML? I understand it is easier to slip things under people's noses in visual mode ... But still. – Justin Jenkins Oct 19 '10 at 9:38
  • iframes are useful for embedding videos. The <object> method relies on flash, whereas the <iframe> method, which most video-sharing sites support these days, allows for HTML5 video. – TRiG Jun 23 '11 at 16:47
9

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

Then just use the shortcode like this:

[iframe http://example.com 400 500]
  • @Ethan Seifert - Nice answer! – MikeSchinkel Oct 21 '10 at 8:47
  • This really applies to my question, no "hacking" required. While stilling needing to use the HTML view ... Thanks. – Justin Jenkins Oct 29 '10 at 8:40
  • The plugin in this answer is no longer up-to-date, but this one looks good instead: wordpress.org/plugins/iframe – Tim Malone Apr 12 '16 at 7:11
23

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/

  • @bueltge - Nice answer. I was just on your site reading that very post earlier today. You know, most of the examples on the web for TinyMCE are not in the context of WordPress and when in the context of WordPress it's significantly more complicated. You clearly understand it well. There's a lot more you could cover about TinyMCE; have you considered doing a series of blog posts on it? – MikeSchinkel Oct 21 '10 at 8:49
  • my greatest problem is the time; but i have an another post baout this topic in my drafts and maybe i post this in the next weeks. Thanks for your tribute. – bueltge Oct 23 '10 at 8:38
1

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.

1

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 );
0

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&amp;source=s_q&amp;hl=de&amp;geocode=&amp;q=New+York+City,+New+York,+USA&amp;aq=0&amp;oq=new+york&amp;sll=51.238455,6.81435&amp;sspn=0.373151,1.056747&amp;ie=UTF8&amp;hq=&amp;hnear=New+York+City,+New+York,+Vereinigte+Staaten&amp;t=m&amp;z=11&amp;iwloc=A&amp;output=embed"]
  • its not working. its just posting the iframe as same content – Ankit Agrawal Dec 17 '18 at 12:28
  • I don't know what you want the code to do, but posting the iframe in the content as you have writtin it, is what the code is supposed to do. So, if the iframe appears in your frontend view, everything works as expected. – SunnyRed Dec 17 '18 at 23:32
0

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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