White text in Editor: Client Request

Hi,

I have setup some custom tinymce formats, one of which is for White Text. The design of the theme requires some sections to have white text on top of a coloured background. The issue with this is that when in the visual editor(page, post etc), once the text has been selected as white, it can no longer be seen because the background is also white in the editor.

Is there a way to declare a coloured highlight, once the text has been selected as White Text; and for this highlight to only show up in the editor and not on the front end?

Here’s my code:

add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );
    function fb_mce_before_init( $settings ) {

$style_formats = array(
    		array(
    			'title' => 'White Text',
    			'inline' => 'span',
    			'styles' => array(
    				'color' => '#ffffff'
    			)
    		)
);

    $settings['style_formats'] = json_encode( $style_formats );
    return $settings;
}

Thanks in advance