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.

Thanks

Topic add-editor-style editor tinymce css customization Wordpress

Category Web

1
answered at

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.

1
answered at

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' );
1
answered at

Use add_editor_style

e.g.: functions.php

add_editor_style('custom-editor-style.css');

http://codex.wordpress.org/Function_Reference/add_editor_style

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.