5

I'm trying to embed an iFrame, and because I set up some CSS using responsive design, I wish to NOT have width="" and height="" attributes whatsoever.

When I type this into the HTML editor field..

<iframe src="https://docs.google.com/document/pub?id=1fsm-cvpdfX-8tXauGrQgRmgWONTpX8J3almvZhzBeCA&amp;embedded=true" class="scale-with-grid"></iframe>

And then I switch to visual mode and come back, it immediately removes the class="scale-with-grid" and changes it to width="320" height="240"

<iframe src="https://docs.google.com/document/pub?id=1fsm-cvpdfX-8tXauGrQgRmgWONTpX8J3almvZhzBeCA&amp;embedded=true" width="320" height="240"></iframe>

How do I avoid this? I used this "Raw HTML" plugin but it didn't apply to this iframe situation whatsoever.

9
  • 1
    possible duplicate of Make WordPress WYSIWYG not strip out iframe's Commented Aug 22, 2012 at 23:53
  • 1
    Please search the WPSE site for related questions before posting new questions. This one has been asked and answered several times already. Commented Aug 22, 2012 at 23:54
  • I searched with "iframe", "HTML", "visual" while entering the new question. Existing questions with similar strings came up but not that one. Thanks for finding it for me.
    – jeffkee
    Commented Aug 23, 2012 at 0:38
  • 2
    Try using "tinymce" when searching for questions related to the visual editor. :) Commented Aug 23, 2012 at 0:42
  • 1
    This answer from @bueltge should solve your problem. Does it?
    – fuxia
    Commented Aug 23, 2012 at 1:40

2 Answers 2

1

On default is the iframe tag a not allowed tag in the editor. You must change the filter for allowed this html tag. Copy the follow source in a plugin and allow iframe for the editor TinyMCE.

add_filter( 'tiny_mce_before_init', 'fb_change_mce_options' );
function fb_change_mce_options( $tags ) {

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

    if ( isset( $tags['extended_valid_elements'] ) )
        $tags['extended_valid_elements'] .= ',' . $ext;
    else
        $tags['extended_valid_elements'] = $ext;

    return $tags;
}
5
  • I think we need class attribute more.
    – Anh Tran
    Commented Sep 4, 2012 at 9:53
  • Have you actually tried this in latest WordPress, and was it successful? I can't get this to work with iframes specifically, after adding both class attribute and setting paste_strip_class_attributes to none. it seems iframe is a special case.
    – Milo
    Commented Sep 4, 2012 at 13:57
  • @Milo: yes, you have right. I have tested now and the class attribute was always filtered. But I have not find an solution in the small time frame, where I tested this.
    – bueltge
    Commented Sep 5, 2012 at 10:07
  • This problem for class attribute is an TinyMCE problem and I dont find an solution; only an custom init in oninit param was possible, but this is a great overhead for this requirement.
    – bueltge
    Commented Sep 5, 2012 at 11:59
  • 1
    I think the solution for allow class on iframes is the embed plugin; maybe little bid to much, id is possible, bute usable; see the embed plugin
    – bueltge
    Commented Sep 5, 2012 at 12:44
1
+100

You could make use of an iframe-shortcode. Here's a small plugin to allow that:

<?php
! defined( 'ABSPATH' ) AND exit;
/** Plugin Name: (#62729) Shortcode to display an iframe */

function wpse62729_allow_iframes_tinymce( $attr )
{
    global $post;

    $attr = shortcode_atts( array(
         'src'          => ''
        ,'width'        => '100%'
        ,'height'       => '100%'
        ,'name'         => md5( $post->post_title )
        ,'scrolling'    => 'no'
        ,'marginheight' => 0
        ,'marginwidth'  => 0
        ,'frameborder'  => 0
        ,'align'        => is_rtl() ? 'right' : 'left'
    ), $attr );

    $html = "<iframe";
    foreach ( $attr as $key => $val )
    {
        $html .= " {$key}='{$val}'";
    }
    $html .= "><p>";
    // Message if not possible to display iframe
    $html .= sprinft( 
        'Displaying the iframe is not possible. View the %ssource following this link%s.'
        ,"<a href='{$attr['src']}' target='_blank'>"
        ,"</a>"
    );
    $html .= "</p></iframe>";

    return $html;
}
add_shortcode( 'iframe', 'wpse62729_allow_iframes_tinymce' );
7
  • why an shortcode for an default tag, its more to parse the content and stopper for performance? The TinyMCE can iframe, only the class attribute is an problem in the current version, but the id attribute works and is a chance for custom style.
    – bueltge
    Commented Sep 9, 2012 at 15:26
  • @bueltge It's just an alternative approach to get around missing (some) support for TinyMCE quickly.
    – kaiser
    Commented Sep 9, 2012 at 15:29
  • Yes, this is. But I see many problems of long exists webspace, there use shortcodes for a while and not supportet now.
    – bueltge
    Commented Sep 9, 2012 at 15:32
  • @bueltge I'm not sure, if I understood you correctly (just explain it again in german - you can delete it later), but at least it's a plugin.
    – kaiser
    Commented Sep 9, 2012 at 15:36
  • 1
    This works perfectly fine! Found a plug-in myself actually, had to make minor mods. web-profile.com.ua/wordpress/plugins/iframe
    – jeffkee
    Commented Sep 11, 2012 at 22:24

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.