Wordpress - How to include own css on wordpress tinymce editor?
Use add_editor_style
e.g.: functions.php
add_editor_style('custom-editor-style.css');
http://codex.wordpress.org/Function_Reference/add_editor_style
add_editor_style
is recommended for theme.
You can mce_css
filter in plugin. The following sample code is from here
function plugin_mce_css( $mce_css ) {
if ( !empty( $mce_css ) )
$mce_css .= ',';
$mce_css .= plugins_url( 'editor.css', __FILE__ );
return $mce_css;
}
add_filter( 'mce_css', 'plugin_mce_css' );
Nothing I found worked. Took me half a day on Google, but finally stumbled upon this script that works:
function kwh_add_editor_style( $mceInit ) {
$custom_css = get_theme_mod( 'custom_css' );
$styles = '.mce-content-body { EDIT YOUR CUSTOM CSS HERE ' . $custom_css . '; }';
if ( !isset( $mceInit['content_style'] ) ) {
$mceInit['content_style'] = $styles . ' ';
} else {
$mceInit['content_style'] .= ' ' . $styles . ' ';
}
return $mceInit;
}
add_filter( 'tiny_mce_before_init', 'kwh_add_editor_style' );
Source of snippet.