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

14 thoughts on “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. 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’);

  3. 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?

  4. 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) :-(

  5. 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?

  6. 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”

  7. WP 3.4.1 is stripping HTML Comments from the browser output of Posts, Pages, Archives and Theme Elements (eg: sidebar); even when inserted/edited in HTML Editor.

    By HTML Comments, I mean:

    The resulting browser output is:

    for the first HTML Comment and all subsequent HTML Comments totally removed.

    A suggested solution (@ http://wordpress.org/support/topic/visual-editor-now-strips-html-comments-new-in-32) was to add the following code snippet to the Themes ‘functions.php’:

    function mod_mce($initArray) {
    $initArray['verify_html'] = false;
    return $initArray;
    }
    add_filter(‘tiny_mce_before_init’, ‘mod_mce’);

    However this did not work at all and produced the same browser output and in this example the Theme ‘functions.php’ does not include any other reference to Tiny MCE and the WP Core ‘class-wp-editor.php’ is totally unedited.

    What do you suggest as a method to disable both the WP Core and the given Theme from altering and stripping HTML Comments from Posts, Pages, Archives and Theme Elements.

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>