WYSIWYG - Better End User Experience Needed - TinyMCE WordPress

Grégory Viguier answers:

For the cache problem (very annoying), add a version number at the end of the url like this:
add_editor_style('editor-style.css?v=1.1');
When you make changes to your css file, change your version number in the url, that's it.

69developer comments:

For some reason, in IE 9, that dosnt work. Works ok in Firefox.

Daniele Raimondi answers:

Hello, I usally use tinymce-advanced and add my stylesheets and styles like this:

<strong>1)</strong> Install tinymce-advanced and add Style dropdown to your tinymce toolbars

<strong>2)</strong> To add a stylesheet to every istance of your tinymce, open your theme functions.php file and add this code:

//load editor-styles.css in tinymce
add_editor_style('css/editor-styles.css');

remember to adjust the path and filename to your custom css file (path is relative to your theme folder)

<strong>3)</strong> To add some styles in the Style dropdown, add this code (to your theme functions.php):

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:
- <em>Style-XX-name</em> is one of the option users can choose from in the styles dropdown
- <em>css-XX-identifier</em> 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.

<strong>4)</strong> 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

An example of one of my editor-styles.css can be found [[LINK href="http://pastebin.com/FWLgnd7Y"]]here[[/LINK]].

Note that I include all css external files (if it's the case) already included in my theme css file just to be sure all elements render the same on frontend and in tinyMCE editor.
Also note that generaly speaking, I usually take all styles defined for the <em>.content</em> div (the one holding all my WP contents on templates file) and below, and "translate" <em>.content</em> in to <em>body.mceContentBody</em>, i.e. the main container in the tinyMCE editor window.

For example, if my theme css includes something like this:

.content p.important {
font-weight: bold;
color: #F00;
}

my tinymce custom css should contain the same translated like this:

body.mceContentBody p.important {
font-weight: bold;
color: #F00;
}




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

If page template filename is <em>page-something.php</em>, it looks for <em>TEMPLATEPATH/css/editor-style-page-something.css</em>.
Obviously it can be extended to take in account <strong>taxonomies </strong>or particular <strong>post ids</strong> etc, as it globalizes <em>$post</em> 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 [[LINK href="http://matty.co.za/2010/08/more-wordpress-custom-editor-styles/"]]here[[/LINK]]!