The right way to add dynamic style to WordPress editor, get color option from customizer page and add it in WordPress editor.

What Is Dynamic Style

Dynamic style is option by you, for example if you changed links color from customizer options, and you want to add links color to WordPress editor, you need Dynamic Style to do that, look to image:

wordpress customize

Now I want links color to be “Red” and heading colors to be “Blue” in my theme style and in WordPress editor style, like this:

Add Dynamic Style To WordPress Editor

How To Add Dynamic Style To WordPress Editor

Using mce_css filter and WordPress AJAX actions, we will add dynamic style to WordPress editor.

Add Dynamic Style

Use this filter, copy function code and paste it in your “functions.php” file:

function WPTime_add_dynamic_css_to_tinymce( $mce_css ){
    if ( ! empty( $mce_css ) ) {
        $mce_css .= ',';
    }

    $mce_css .= add_query_arg(
                              array(
                                   'action' => 'wptime_tiny_dyn_style',
                                   '_nonce' => wp_create_nonce( 'wptime-dyn-style-nonce')
                ),

                admin_url( 'admin-ajax.php' )
    );

    return $mce_css;
}
add_filter( 'mce_css', 'WPTime_add_dynamic_css_to_tinymce' );

Now we need AJAX function:

function wptime_tiny_dyn_style_ajax_callback(){
    header( 'Content-type: text/css' );

    $get_links_color = get_option('link_color'); // example for link color, change it to your option

    $get_heading_color = get_option('heading_color'); // example for heading color, change it to your option

    // and more options, etc...

    echo " a{ color: $get_links_color; } ";

    echo " h1, h2, h3, h4, h5, h6,{ color: $get_heading_color; } ";

    // etc...

    die();
}
add_action( 'wp_ajax_wptime_tiny_dyn_style', 'wptime_tiny_dyn_style_ajax_callback' );
add_action( 'wp_ajax_no_priv_wptime_tiny_dyn_style', 'wptime_tiny_dyn_style_ajax_callback' );

Now link color and heading color will be added to WordPress editor, change code and enter your options and css code.

WordPress AJAX

Read WordPress AJAX tutorial.