WordPress keeps altering my embed code

Every time I edit a WordPress post or page that has a google map embedded in it – useing the “visual” edit mode – wordpress deletes part of the data.

for example: this

Read More
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=212526618623367333770.00049b7dc074f6426719d&amp;t=h&amp;ll=34.926059,-81.964874&amp;spn=0.300106,0.458336&amp;output=embed"></iframe><br /><small>View <a href="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=212526618623367333770.00049b7dc074f6426719d&amp;t=h&amp;ll=34.926059,-81.964874&amp;spn=0.300106,0.458336&amp;source=embed" style="color:#0000FF;text-align:left">1825 Spartanburgh Map</a> in a larger map</small>

turns into

<small>View <a style="color: #0000ff; text-align: left;" href="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=212526618623367333770.00049b7dc074f6426719d&amp;ll=34.926059,-81.943846&amp;spn=0.300106,0.416279&amp;source=embed">1825</a> in a larger map</small>

Which does not render the map at all.

This does not happen when I edit in “html” mode.

How can I prevent WordPress from altering this embed code?

Related posts

Leave a Reply

2 comments

  1. The issue is WordPress’ core configuration of TinyMCE, which strips IFRAME tags.

    You can modify this configuration, to allow IFRAME tags, by hooking into tiny_mce_before_init. For example, the following code will prevent TinyMCE from stripping IFRAME, PRE, and DIV tags:

    function mytheme_tinymce_config( $init ) {
    
    // Change code cleanup/content filtering config
    
        // Don't remove line breaks
        $init['remove_linebreaks'] = false; 
        // Convert newline characters to BR tags
        $init['convert_newlines_to_brs'] = true; 
        // Preserve tab/space whitespace
        $init['preformatted'] = true; 
        // Add to list of formats to remove with Remove Format button
        $init['removeformat_selector'] = 'b,strong,em,i,span,ins,del,h1,h2,h3,h4,h5,h6,pre';
        // Do not remove redundant BR tags
        $init['remove_redundant_brs'] = false;
    
    // Add 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]';
        // PRE
        $valid_pre = 'pre[id|name|class|style]';
        // DIV
        $valid_div = 'div[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style|title]';
    
        // Concatenate 
        $cbnet_valid_elements = $valid_iframe . ',' . $valid_pre . ',' . $valid_div;
    
        // Add to extended_valid_elements if it alreay exists
        if ( isset( $init['extended_valid_elements'] ) ) {
            $init['extended_valid_elements'] .= ',' . $cbnet_valid_elements;
        } else {
            $init['extended_valid_elements'] = $cbnet_valid_elements;
        }
    
    // Pass $init back to WordPress
        return $init;
    }
    add_filter('tiny_mce_before_init', 'mytheme_tinymce_config');
    

    See here for the full list of configurable options.

  2. I don’t know for certain, but I think it may be related to the allowed tags for posts. See my question from a few days ago. Basically wordpress will filter out tags that are not allowed. So for example you could prevent script tags. You also have to specify what parameters are allowed. So for instance you could allow an img tag with the src attribute, but not the alt attribute.

    What are allowedposttags and allowedtags?