engfer(s)

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