TinyMCE Advanced
editor-style.css not working with (6 posts)

  1. catwithhat
    Posted 5 years ago #

    It appears that the way tinymce-advanced handles the use of the editor-style.css seems to be broken. To display styles in prior version (3.1) we had a line in the functions.php of the theme:
    and then copied the relevant styles from the theme to the out-editor-theme.css which was located in the theme directory.

    This seems to no longer work? Any suggestions on how to make the editor use the theme's styles?



  2. Daniele Raimondi
    Posted 4 years ago #

    I've found this solution working up to wp 3.2.1 and TinyMCE Advanced

    1) Go to Settings -> TinyMCE Advanced and drag&drop the "styles" box over one editor active toolbar, then save changes.

    2) Add a css file in your theme folder, for example:

    3) Open your theme functions.php and add code below:

    //load extra-editor-styles.css in tinymce
    add_filter('tiny_mce_before_init', 'myCustomTinyMCE' );
    /* Custom CSS styles on TinyMCE Editor */
    if ( ! function_exists( 'myCustomTinyMCE' ) ) {
    	function myCustomTinyMCE($init) {
    		$init['theme_advanced_styles'] = 'Style-01-name=css-01-identifier; Style-02-name=css-02-identifier; Style-03-name=css-03-identifier';
    	return $init;

    - Style-XX-name is one of the option users can choose from in the styles dropdown
    - css-XX-identifier is the relative class name that will be added to the selected dom element.
    Obviously you can go further and add as many classes you want, using ";" as separator.

    4) Insert in css/extra-editor-styles.css all css code relative to all classes you have defined at point 3) and all the defined custom styles will be applied directly in the editor textarea and on front-end.

    Hope this can help.

    Bye, Daniele.

  3. Andrew Ozz
    WordPress Dev
    Plugin Author

    Posted 4 years ago #

    The editor-stile.css support in TinyMCE Advanced is only for themes that don't have it. If you're adding it in the theme's functions.php, you don't need to turn it on in the plugin.

  4. John_6x6
    Posted 4 years ago #

    Thanks, mad_max. Just what I was looking for.

  5. Daniele Raimondi
    Posted 4 years ago #

    A little addition I've coded recently that can be useful: if you have several page template with different styles, this code can auto-include (if it exists) a css relative to every page template in tinymce.

    If page template filename is page-something.php, it looks for TEMPLATEPATH/css/editor-style-page-something.css.
    Obviously it can be extended to take in account taxonomies or particular post ids etc, as it globalizes $post so you can extract all informations you need.
    Here is the code, hope it can be useful:

     * add_tinymce_custom_styles()
    add_filter( 'mce_css', 'add_tinymce_custom_styles' );
    function add_tinymce_custom_styles( $url ) {
    	global $post;
    	if ( isset( $post->page_template )){
    		$pagetemplate = array_shift( explode( '.php', $post->page_template ) );
    		if ( file_exists( TEMPLATEPATH.'/css/editor-style-'.$pagetemplate.'.css' ) ){
    			if ( !empty($url) ) $url .= ',';
    			$url .= trailingslashit( get_stylesheet_directory_uri() ) . 'css/editor-style-'.$pagetemplate.'.css';
    	return $url;

    thanks to Matt and Tyson suggestions here!

  6. John_6x6
    Posted 4 years ago #

    Excellent. Thanks for sharing

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • TinyMCE Advanced
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic