Personally, I style all of the content placed within the WP Editor using just a single class, typically .entry-content which I’ve used in the example below.
When outputting the content from the WP Editor on the front end, I wrap it in div.entry-content. Using a single HTML class simplifies things:
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 wpse247805_editor_styles() {
// Use our existing main stylesheet for TinyMCE too.
add_editor_style( 'style.css' );
}
add_action( 'after_setup_theme', 'wpse247805_editor_styles' );
I use the wpse247805_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 wpse247805_editor_styles_class( $settings ) {
$settings['body_class'] = 'entry-content';
return $settings;
}
add_filter( 'tiny_mce_before_init', 'wpse247805_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;
}
}