WordPressprovides a mce_css filter, 可用于将自定义样式表添加到可视化编辑器。根据法典：

文件可以是。php文件，允许动态生成内容编辑器的CSS规则。

Codex筛选器回调示例，针对主题进行了修改：

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\' );

我通过@ungestaltbar接受了上述解决方案。然而，我想用我正在使用的完整解决方案来扩展这个答案，以便其他人可以看到它是如何工作的。

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();
}

我可能来晚了，但在使用上述解决方案后，我很快意识到编辑器的页面加载速度严重受损！仔细看了一下代码，我意识到在tinyMCE之后，代码一直在执行。activeEditor已初始化。代码使用setInterval（）方法，该方法以指定的时间间隔计算表达式，我认为这是因为您无法确定在代码执行期间的什么时候“activeEditor”可用。这就是页面速度下降到最低的原因。

我用来构建插件的一个更好的解决方案是

   /**
     * 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\');

这是WordPress上发布的一个经过修改的解决方案。此问题的组织论坛：http://wordpress.org/support/topic/customdynamic-css-in-tinymce?replies=14#post-4827573

这绝对有效。我不是JS大师，所以我不完全确定这是否是最好的解决方案。

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 }