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.