如何在TinyMCE中添加自定义CSS（主题选项）？

14

我试图将自定义CSS（通过主题选项设置）添加到WordPress中的TinyMCE可视编辑器。在前端，主题生成此CSS并将其输出到wp_head钩子上。我遇到的问题是能够将CSS输出添加到编辑器中。

不能这样做，add_editor_style( 'editor-style.css' )因为我们需要使用PHP来访问主题选项。

作为其如何在前端工作的示例：

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}; }";
}

我需要一种将自定义样式添加到可视化编辑器中的方法。任何帮助将不胜感激。

tinymce

— 贾斯汀·塔德洛克（Justin Tadlock）
source

1

注意：自定义后内容CSS是Plugin Territory，不应放在主题中。否则，用户在切换到其他主题时将丢失其自定义CSS。

— Chip Bennett

@ChipBennett我只是部分同意。这在很大程度上取决于什么你的造型。除此之外，（在那个问题上）它在哪里都没有关系。

— kaiser

@ChipBennett这与主题样式有关，而不是自定义帖子内容CSS。这是您可以使用主题定制器完成的非常标准的工作。只是应用这些样式让我感到困惑。表示称赞editor-style.css，这是主题领域。

— 贾斯汀·塔德洛克

等待：您是在谈论动态自定义编辑器样式吗？如：使视觉编辑器（TinyMCE）知道主题选项定义的样式？如果是这样，请忽略我的原始评论，并为该问题+1。

— Chip Bennett

您可以提交编辑并显示主题样式的完整示例吗？这样会更容易测试。

— kaiser

7

解决方案1

这可以作为javascript解决方案：

例：

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

只需打开js控制台并将其粘贴即可进行快速测试。要针对特定的编辑者，应使用：

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

这会将提供的字符串注入到iframe编辑器中 <head><style id="mceDefaultStyles"></style> ...

解决方案2

使用wp_ajax作为回调处理程序，以通过使用过滤器在编辑器init上添加动态样式

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;}";
}

— 栏
source

2

我不完全确定该怎么办。

— 贾斯汀·塔德洛克

解决方案2实际上对我来说很有意义。我将进行测试。

— 贾斯汀·塔德洛克

我选择了解决方案2。区别在于我删除了第一个函数并使用了它，add_editor_style( add_query_arg( 'action', 'my_editor_styles', admin_url( 'admin-ajax.php' ) )因为这是主题添加编辑器样式的标准方法。

— 贾斯汀·塔德洛克

仅出于我自己的兴趣，我很想知道是否mce_css为您工作（如果您尝试过）。

— Chip Bennett

实际上，我还没有尝试过，因为我知道您可以将非CSS文件传递给add_editor_style()，但在查看代码后应该可以正常工作。如果mce_css您需要在通过添加样式之后进行钩接，则使用实际上是更好的解决方案add_editor_style()。主题中的此类原因之一是add_editor_style()，尽管添加了完整的URL ，但它们的添加顺序却是首先输出。

— 贾斯汀·塔德洛克

10

WordPress 提供了一个mce_css过滤器，可用于将自定义样式表添加到Visual Editor。根据食典：

该文件可以是.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' );

— 芯片贝内特
source

Bennett先生的速度更快，也将其添加到以下我的回答中：)，但略有不同。

— ungestaltbar 2013年

@ungestaltbar我们实际上正在使用两个完全不同的过滤器。:)

— Chip Bennett

具有相同的结果:)

— ungestaltbar 2013年

4

我通过@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();
}

我希望可以在此处发布另一个答案。我没有办法直接回复我接受的解决方案。我仍在学习如何使用WPSE。

— 贾斯汀·塔德洛克（Justin Tadlock）
source

也许您应该添加add_action( 'wp_ajax_nopriv_my_editor_styles', 'my_editor_styles_callback' );是否在前端使用了编辑器（对于非登录用户）。

— OriginalEXE

是的，做出重大更改/调整即可很好地解决问题。:)仅供参考，如果要解决原始问题中的某个问题，则提交编辑内容是可行的。

— 2013年

@OriginalEXE-是的我会更新。

— 贾斯汀·塔德洛克

只是对以后找到它的任何人的一个提示，我无法使它正常工作，如本文所述。我终于弄清楚了我必须在回调中包含标头信息，因此它将被视为css。header（“ Content-type：text / css; charset：UTF-8”）; 不知道这是否与我的.htaccess有所不同。

— SkyShab 2014年

4

我可能参加这个聚会很晚，但是在使用上述解决方案后，我很快意识到编辑器的页面加载速度已严重受损！通过敏锐地查看代码，我意识到在初始化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');

在此，初始化活动编辑器后，将使用本机TinyMCE侦听器来执行代码。我希望这会对外面的人有所帮助。亲切的问候。

— Ayebare M
source

1

这对我有用，在tinymce 4.0中只有一个已弃用的API调用，您需要将ed.onInit.add（function（）{...更改为ed.on（'init'，function（）{...

— Mohammed

1

这是在WordPress.org论坛上针对此问题发布的修改后的解决方案：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 }

也可以将其添加到JS文件中。您可以轻松地通过它传递变量wp_localize_script()。

— 贾斯汀·塔德洛克（Justin Tadlock）
source