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.
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.
Thanks, mad_max. Just what I was looking for.
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!
Excellent. Thanks for sharing
