How To Allow Stripped Element Attributes in WordPress’ TinyMCE Editor

The proper way to correct any attributes that TinyMCE strips off of your WordPress posts/pages’ elements is to use the tiny_mce_before_init filter hook. Unfortunately, WordPress doesn’t document this very well, so I will.

UPDATE: 2008-11-06: I have made a WordPress plugin that does this for you!

» TinyMCE Valid Elements

The Wrong Way

I found many examples out there on the webs that say to edit wp-includes/js/tinymce/tiny_mce_config.php and concat to TinyMCE’s init() your extended_valid_elements. However, this is dumb and incorrect because the second another WordPress update comes out, it will overwrite that file and you will lose your changes.

The Right Way

The better thing to do is to change the extended_valid_elements property in the WordPress TinyMCE init array via the tiny_mce_before_init filter hook.

What WordPress doesn’t tell you is what the filter hook expects as parameters and return types, so listen up!

The tiny_mce_before_init filter hook expects:

  • Parameters:
    • Associative array of existing TinyMCE init variables
  • Returns:
    • The same associative array that you may or may not have modified.
/**
 * Add to extended_valid_elements for TinyMCE
 *
 * @param $init assoc. array of TinyMCE options
 * @return $init the changed assoc. array
 */
function my_change_mce_options( $init ) {
    // Command separated string of extended elements
    $ext = 'pre[id|name|class|style]';

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

    // Super important: return $init!
    return $init;
}

add_filter('tiny_mce_before_init', 'my_change_mce_options');

UPDATE: 2008-11-06: I have made a WordPress plugin that does this for you!

» TinyMCE Valid Elements

13 Responses to How To Allow Stripped Element Attributes in WordPress’ TinyMCE Editor

  1. Hi – we are desparate to include – we are using wp 2.6.3 plus tincymce extended – cud u possibly help>

  2. sorry as above iframe

  3. Pingback: Using SyntaxHighlighter to Format Code in WordPress » Ellis Web

  4. In order to use the iframe within TinyMCE, the code above would read as such:

    function my_change_mce_options( $init ) {
    // Command separated string of extended elements
    $ext = ‘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'] .= ‘,’ . $ext;
    } else {
    $init['extended_valid_elements'] = $ext;
    }

    // Super important: return $init!
    return $init;
    }

    add_filter(‘tiny_mce_before_init’, ‘my_change_mce_options’);

  5. This looks really like what I need right now. I want to experiment a bit with TinyMCE. Though I know it pretty well from other environments, I’m quite new to WordPress. Could you extend your post to explain to noobs like me where and how your code should be added? I.e., suppose I’d make a plugin with some TinyMCE settings changed, can I then use your code and how?

  6. here is how u can do it, its the best way

  7. THX for this… but I have to add the code above in this file ->

    wp-includes/js/tinymce/wp-tinymce.php

    … because the plugin didn’t work for me (WP 2.9.1) :-(

  8. Hello, I found your article very usefull.
    I want to add filter that unables enclosing my shortcode (that has s inside) by tags, that unfortunatelly tinymce do automatically. This behaviour makes my page invalid.
    I wrote this piece of code:

    function change_mce_options( $init ) {
    $init['force_p_newlines'] = false;
    return $init;
    }
    add_filter(“mce_force_p_newlines”, “change_mce_options”);

    But it doesn’t seem to work. Can you help with that?
    What’s wrong?
    Or is there other way to stop tinymce do such things?

  9. I’m sorry for previous post.
    “that has s inside” => “that has div-tags inside”
    “by tags, that unfortunatelly tinymce do automatically” => “by p-tags, that unfortunatelly tinymce do automatically”

  10. Pingback: WP插入代码插件 Prettify Button 发布 | Ghoul To World!

  11. Thanks for the concepts you discuss through this website. In addition, quite a few young women who become pregnant never even try and get health insurance coverage because they have anxiety they couldn’t qualify. Although a lot of states currently require insurers supply coverage in spite of the pre-existing conditions. Rates on these kinds of guaranteed plans are usually bigger, but when thinking about the high cost of health care it may be a safer route to take to protect the financial future.

  12. Pingback: Wordpress TincyMCE Editor Removes Attributes | LMH Productions

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>