Add Wrapper with Class to WYSIWYG Editor

Here’s the approach that I use. I add a single class (typically .entry-content) to the WP Editor on the back end as well as to the wrapper element when I output content on the front end.

style.css

.entry-content h2 {
    color: purple;
}
/* etc ... */

I’m also using add_editor_style() to load my theme’s default stylesheet into TinyMCE:

function wpse_editor_styles() {
    // Use our existing main stylesheet for TinyMCE too.
    add_editor_style( 'style.css' );
}
add_action( 'after_setup_theme', 'wpse_editor_styles' );

I use the wpse_editor_styles_class() function below, which simply adds the .entry-content class to the TinyMCE <body> element.

/**
 * Add .entry-content to the body class of TinyMCE.
 * @param array $settings TinyMCE settings.
 * @return array TinyMCE settings.
 */
function wpse_editor_styles_class( $settings ) {
    $settings['body_class'] = 'entry-content';
    return $settings;
}
add_filter( 'tiny_mce_before_init', 'wpse_editor_styles_class' );

Sometimes I find it necessary to override the styles applied to .entry-content inside of the WP Editor. I use Sass and I have a partial dedicated for this purpose.

// TinyMCE .wp-content overrides.
body#tinymce.wp-editor {

    // Override Foundation's height: 100%; because WP Editor in 4.0+ won't scroll down all of the way otherwise.
    height: auto !important;

    &.entry-content {
        margin: 16px;
    }
}

Related Posts: