How to add custom CSS (theme option) to TinyMCE?

1 Views

I’m trying to add custom CSS (set via theme options) to the TinyMCE visual editor in WordPress. On the front end, the theme generates this CSS and outputs it on the wp_head hook. The problem I’m running into is being able to add that CSS output to the editor.

This can’t be done with add_editor_style( 'editor-style.css' ) because we need to use PHP to access the theme option.

Read More

As an example of how it works on the front end: 

add_action( 'wp_head', 'my_custom_colors' );

function my_custom_colors() {
    $color_1 = get_theme_mod( 'color_1', 'cc4a00' );

    echo "<style type='text/css'>a { color: #{$color_1}; }";
}

I need a method for getting that custom style into the visual editor. Any help would be greatly appreciated.

Post Views: 1

Related posts

5 comments

  1. Solution 1

    This works as javascript solution:

    Example:

    tinyMCE.activeEditor.dom.addStyle('p {color:red; font-size:28px;}');

    just open your js console and paste it for a quick test.
    To target a specific editor one should use:

    tinyMCE.getInstanceById('##editorID##').dom.addStyle('p {color:red; font-size:28px;}');

    This will inject the provided string into the editors iframe <head><style id="mceDefaultStyles"></style> ...

    Solution 2

    Use wp_ajax as callback handler to add dynamic styles on editor init by using a filter

    add_filter('tiny_mce_before_init', 'dynamic_editor_styles', 10);

function dynamic_editor_styles($settings){
    // you could use a custom php file as well, I'm using wp_ajax as
    // callback handler for demonstration
    // content_css is a string with several files seperated by a comma
    // e.g. file1, file2, ... extend the string

    $settings['content_css'] .= ",".admin_url('admin-ajax.php') ."/?action=dynamic_styles";
    
    return $settings;
}

// add wp_ajax callback
add_action('wp_ajax_dynamic_styles', 'dynamic_styles_callback');
function dynamic_styles_callback(){
    echo "p {color:red} h1{font-size:48px;}";
}

  2. WordPress provides a mce_css filter, that can be used to add custom stylesheets to the Visual Editor. According to the Codex:

    The file can be a .php file, allowing dynamic generation of CSS rules
    for the content editor.

    Example Codex filter callback, modified for a Theme:

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

    $mce_css .= get_template_directory_uri() . '/dynamic-css.php';

    return $mce_css;
}

add_filter( 'mce_css', 'wpse120831_mce_css' );

  3. I accepted the solution above by @ungestaltbar. However, I wanted to expand on this answer a bit with the full solution that I am using so that others could see how it works.

    add_action( 'after_setup_theme', 'my_theme_setup' );

function my_theme_setup() {

    add_editor_style(
        array(
            'editor-style.css',
            add_query_arg( 'action', 'my_editor_styles', admin_url( 'admin-ajax.php' ) ),
        )
    );
}

add_action( 'wp_ajax_my_editor_styles', 'my_editor_styles_callback' );
add_action( 'wp_ajax_nopriv_my_editor_styles', 'my_editor_styles_callback' );

function my_editor_styles_callback() {

    // @todo sanitize
    $color_1 = get_theme_mod( 'color_1', 'cc4a00' );

    echo "a { color: #{$color_1}; }";

    die();
}

    I’m hoping it’s okay to post another answer here like this. I didn’t see a way to post this in direct reply to my accepted solution. I’m still learning how to use WPSE.

  4. I am probably late to this party but after using the above solution, I soon realized that page load speed of the editor had severely been crippled!
    Taking a keen look at the code, I realized that the code keeps executing long after tinyMCE.activeEditor has been initialized.
    The code uses The setInterval() method which evaluates an expression at specified intervals, I believe that was because you couldn’t determine at what point during code execution “activeEditor” will be available. This is what brought the page speed down to its knees.

    A much better solution I am using to build a plugin is this

       /**
     * Extend TinyMCE config with a setup function.
     * See http://www.tinymce.com/wiki.php/API3:event.tinymce.Editor.onInit

     */
    function custom_tinymce_css($init) {

      $css = get_option('some_css'); 

     ?>

        <script type="text/javascript">            

            function addTempCSS( ed ) {
                ed.onInit.add( function() {
                    tinyMCE.activeEditor.dom.addStyle(<?php echo json_encode($css) ?>);
                } );
            };
        </script>

        <?php
        if (wp_default_editor() == 'tinymce')
            $init['setup'] = 'addTempCSS';

        return $init;
    }
    add_filter('tiny_mce_before_init', 'custom_tinymce_css');

    Here a native TinyMCE listener is used to execute the code after the active editor is initialized. I hope this will help someone out there.
    Kind regards.

  5. This is a modified solution posted on the WordPress.org forums for this question: http://wordpress.org/support/topic/customdynamic-css-in-tinymce?replies=14#post-4827573

    This definitely works. I’m no JS guru though, so I’m not entirely sure if this is the best solution.

    add_action( 'before_wp_tiny_mce', 'my_tinymce_callback' );

function my_tinymce_callback() {

    $color_1 = get_theme_mod( 'color_1', 'cc4a00' ); ?>

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

        function() {
            var my_style = 'a { color: #<?php echo $color_1; ?>; }';

            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 }

    This could also be added to a JS file. You could easily pass variables via wp_localize_script() with that.

Comments are closed.