customization - How to include own css on wordpress tinymce editor?

admin管理员组

文章数量:1125626

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

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

• customization
• css
• tinymce
• editor
• add-editor-style

Share Improve this question edited Jan 20, 2013 at 6:43 shea 5,63244 gold badges3838 silver badges6262 bronze badges asked Apr 11, 2012 at 9:06 Wordpress DWordpress D 8311 gold badge11 silver badge44 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 12

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.

本文标签： customizationHow to include own css on wordpress tinymce editor