Dynamic/inline changing of MCE editor fonts

While it is possible to change the fonts used in the MCE editor by changing the css file that is specific to the editor , it is sligtly more difficult to make the fonts change dynamically, for example such that:

• hyperlinks change in response to customizing the hyperlink color within the theme
• Font changes introduced using additional custom options, e.g. when using the Option Tree plugin

There is not a filter or on action hook that allows dynamic css to be loaded in advance of the editor being loaded within the iFrame, and the only option is to use java script which dynamically inserts the css into the text that has been uploaded to the editor window.

The following code changes the h1 and h2 font styles to match styles that were set using option tree, and changes the hyperlink font to match the color that is set within the twentyeleven theme and also to change the width of the editor window to match the width that the post/page will have on a (full sized) screen. This code was added within functions.php of the cricket custom child theme, but could also be added in a plugin

add_action( 'before_wp_tiny_mce', 'my_tinymce_callback' );

function my_tinymce_callback() {

 <script type="text/javascript">
 jQuery( document ).ready(

   function() {
     var my_style = '<?php custom_css(); ?>';
     var checkInterval = setInterval(
       function() {

         if ( 'undefined' !== typeof( tinyMCE ) ) {
           if ( tinyMCE.activeEditor && ! tinyMCE.activeEditor.isHidden() ) {
             jQuery( '#content_ifr' ).contents().find( 'head' ).append( '<style type="text/css">' + my_style + '</style>' );
             clearInterval( checkInterval );
           }
         }
       }, 500 
     );
   }
 );
 </script>

<?php }

function custom_css()
{
 $main_font = array();
 $menu_font = array();
 $main_heading_font['font-color'] = "#660066";
 $main_heading_font['font-size'] = "20px";
 $main_heading_font['font-weight'] = "bold";
 $sub_heading_font['font-color'] = "#660066";
 $sub_heading_font['font-size'] = "15px";
 $sub_heading_font['font-weight'] = "bold";

 if ( function_exists( 'ot_get_option' ) ) {
 $main_heading_font = ot_get_option( 'cricket_main_heading_font' );
 $sub_heading_font = ot_get_option( 'cricket_sub_heading_font' );
 }

 if (strlen($main_heading_font['font-family']) ==0)
 {
 $main_heading_font['font-family'] = "\"Lucida Sans Unicode\", \"Lucida Grande\", sans-serif";
 }
 if (strlen($sub_heading_font['font-family']) ==0)
 {
 $sub_heading_font['font-family'] = "\"Lucida Sans Unicode\", \"Lucida Grande\", sans-serif";
 }
 $options = twentyeleven_get_theme_options();
 $link_color = $options['link_color'];

 
 echo "h1,h2 { font-family:".$main_heading_font['font-family'].";color: ".$main_heading_font['font-color']."; } ";
 echo "h1 { font-weight: ".$main_heading_font['font-weight']."; font-size: ".$main_heading_font['font-size']."; }";
 echo "h2 { font-weight: ".$sub_heading_font['font-weight']."; font-size: ".$sub_heading_font['font-size']."; }";
 echo "h1,h2 { margin: 0 0 0; clear: none; }";

 if (in_array('post-format-'.get_post_format($id),SidePostTypes()))
   $width = "238";
 else 
   {
     if ($post->post_type != 'page')
     $id = $post -> post_parent; 
     if ($id > 0)
     {
        $p_status = VisiblePostStatuses();
        $args = array( 'order' => 'ASC', 'orderby' => 'menu_order','post_status' => $p_status);
        $postlist;$postlist2;
        $wp_sidebar_query = get_all_side_posts($id,$args,$postlist,$postlist2); 
        $sidebar_post_count = $wp_sidebar_query -> post_count;

        if ($sidebar_post_count > 0)
          $width = "595";
        else
          $width = "848";
      }
    else
      $width = "848";
   }
 echo ".mceContentBody { max-width: ".$width."px; border: 1px solid #b5b5b5; }";
 echo "a {color: ".$link_color.";";
 
}