WordPress 如何新增自定義 CSS(主題選項) 到 TinyMCE？

問題描述

我試圖新增自定義 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}; }";
}

我需要一種將該自定義樣式轉換為視覺化編輯器的方法。任何幫助將不勝感激。

最佳解決方案

解決方案 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;}";
}

次佳解決方案

WordPress 提供了一個 mce_css 過濾器，可用於將自定義樣式表新增到視覺化編輯器。根據食典：

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

示例 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' );

第三種解決方案

我可能晚了這個派對，但使用上面的解決方案後，我很快意識到，編輯器的頁面載入速度已經嚴重癱瘓！仔細看看程式碼，我意識到，在初始化了 tinyMCE.activeEditor 之後程式碼一直執行很久。程式碼使用以規定的間隔評估表示式的 The 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 偵聽器用於在主動編輯器初始化之後執行該程式碼。我希望這將有助於一個人在那裡。親切的問候。

第四種方案

我接受了 @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 。

參考文獻

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

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

WordPress 如何新增自定義 CSS(主題選項) 到 TinyMCE？