WordPress.org

1. catwithhat
   Member
   Posted 10 months 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:
   add_editor_style('our-editor-theme.css')
   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?

   Thanks
   Peter

   http://wordpress.org/extend/plugins/tinymce-advanced/

2. Daniele
   Member
   Posted 9 months ago #

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

   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:
   css/extra-editor-styles.css

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

   //load extra-editor-styles.css in tinymce
   add_editor_style('css/extra-editor-styles.css');
   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;
   	}
   }

   where:
   - 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
   Posted 9 months 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
   Member
   Posted 6 months ago #

   Thanks, mad_max. Just what I was looking for.

5. Daniele
   Member
   Posted 6 months 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
   Member
   Posted 6 months ago #

   Excellent. Thanks for sharing

Reply

You must log in to post.