The mce_css filter provides a method to add custom stylesheets to the TinyMCE editor window.
$mce_css is a comma separated list of stylesheet URIs.
The file can be a .php file, allowing dynamic generation of CSS rules for the content editor.
If you are doing this from within a theme, consider using add_editor_style() instead.
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' );
Because mce_css is a comma-separated string of values, you cannot use the default href string from a source like Google Fonts if it contains multiple faces (e.g., 'http://fonts.googleapis.com/css?family=Lato:300,400,700'). You must replace the commas with their URL-encoded equivalent, '%2C'.
function plugin_mce_css( $mce_css ) {
if ( ! empty( $mce_css ) )
$mce_css .= ',';
$font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
$mce_css .= str_replace( ',', '%2C', $font_url );
return $mce_css;
}
add_filter( 'mce_css', 'plugin_mce_css' );