How to include own css on wordpress tinymce editor?

I have added some text on tinymce editor on load.
(Every time you click on Add new the tinymce editor load with this text.)

but problem is how to enable css class which are using in default text.

Read More

Thanks

Related posts

Leave a Reply

3 comments

  1. 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' );
    
  2. 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.