WordPress TinyMCE：將 CSS 新增到格式下拉選單

問題描述

我使用 add_editor_style() 成功新增了 TinyMCE 樣式表，以便我可以預覽 TinyMCE 編輯器正文中的樣式。

但是，我是否正確地假設 add_editor_style() 函式只能訪問編輯器的主體的樣式？

如果是，是否有另一種方法或功能，我可以用來訪問 TinyMCE 格式下拉式清單的樣式？

最佳解決方案

您不能增強下拉式清單 formatselect 。但是可以用鉤子 tiny_mce_before_init 來增強 styleselect 的第二個下拉選單，在預設的 WordPress 安裝中隱藏。 documentation 列出所有預設值和可能性。

inline – 要生成的內聯元素的名稱，例如「span」。當前文字選擇將被包裝在此內聯元素中。
塊 – 要生成的塊元素的名稱，例如「h1」。選擇中的現有塊元素被替換為新的塊元素。
選擇器 – CSS 3 選擇器模式以查詢選擇內的元素。這可以用於將類應用於特定元素或複雜的事物，如表中的奇數行。
類 – 用於應用所選元素或新的內聯/塊元素的空格分隔列表。
樣式 – 使用 CSS 樣式專案 (如顏色等) 的名稱/值物件
屬性 – 名稱/值物件，其屬性應用於所選元素或新的內聯/塊元素。
精確 – 停用合併類似樣式功能時使用。這是一些 CSS 繼承問題所需要的，例如 text-decoration 用於下劃線/strikethough 。
wrapper – 指示當前格式是塊元素的容器格式的狀態。例如一個 div 封裝或 blockquote 。

風格按鈕

請注意，預設情況下，樣式下拉式清單在 WordPress 中被隱藏。首先將自定義格式的按鈕新增到 TinyMCE 的選單欄中，在示例行 2 中使用鉤子 mce_buttons_2 。

add_filter( 'mce_buttons_2', 'fb_mce_editor_buttons' );
function fb_mce_editor_buttons( $buttons ) {

    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

自定義樣式

然後增強這個按鈕的下拉。 Aslo 透過陣列中的附加值有助於啟用，有關此示例，請參閱 codex 。

/**
 * Add styles/classes to the "Styles" drop-down
 */ 
add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );

function fb_mce_before_init( $settings ) {

    $style_formats = array(
        array(
            'title' => 'Download Link',
            'selector' => 'a',
            'classes' => 'download'
            ),
        array(
            'title' => 'My Test',
            'selector' => 'p',
            'classes' => 'mytest',
        ),
        array(
            'title' => 'AlertBox',
            'block' => 'div',
            'classes' => 'alert_box',
            'wrapper' => true
        ),
        array(
            'title' => 'Red Uppercase Text',
            'inline' => 'span',
            'styles' => array(
                'color'         => 'red', // or hex value #ff0000
                'fontWeight'    => 'bold',
                'textTransform' => 'uppercase'
            )
        )
    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;

}

Result

增強下拉選單

您還可以使用樹形選單增強下拉選單。從上面的示例源建立 var，在陣列中具有更多的結構，如跟隨源。

    $style_formats = array(
        array(
            'title' => 'Headers',
                'items' => array(
                array(
                    'title' => 'Header 1',
                    'format' => 'h1',
                    'icon' => 'bold'
                ),
                array(
                    'title' => 'Header 2',
                    'format' => 'h2',
                    'icon' => 'bold'
                )
            )
        ),
        array(
            'title' => 'Download Link',
            'selector' => 'a',
            'classes' => 'download'
        )
    );

有關更多可能性和引數，請參閱「樣式格式下拉」欄位的預設值 (在 javascript 中編寫) 。

var defaultStyleFormats = [
    {title: 'Headers', items: [
        {title: 'Header 1', format: 'h1'},
        {title: 'Header 2', format: 'h2'},
        {title: 'Header 3', format: 'h3'},
        {title: 'Header 4', format: 'h4'},
        {title: 'Header 5', format: 'h5'},
        {title: 'Header 6', format: 'h6'}
    ]},

    {title: 'Inline', items: [
        {title: 'Bold', icon: 'bold', format: 'bold'},
        {title: 'Italic', icon: 'italic', format: 'italic'},
        {title: 'Underline', icon: 'underline', format: 'underline'},
        {title: 'Strikethrough', icon: 'strikethrough', format: 'strikethrough'},
        {title: 'Superscript', icon: 'superscript', format: 'superscript'},
        {title: 'Subscript', icon: 'subscript', format: 'subscript'},
        {title: 'Code', icon: 'code', format: 'code'}
    ]},

    {title: 'Blocks', items: [
        {title: 'Paragraph', format: 'p'},
        {title: 'Blockquote', format: 'blockquote'},
        {title: 'Div', format: 'div'},
        {title: 'Pre', format: 'pre'}
    ]},

    {title: 'Alignment', items: [
        {title: 'Left', icon: 'alignleft', format: 'alignleft'},
        {title: 'Center', icon: 'aligncenter', format: 'aligncenter'},
        {title: 'Right', icon: 'alignright', format: 'alignright'},
        {title: 'Justify', icon: 'alignjustify', format: 'alignjustify'}
    ]}
];

將自定義樣式表新增到編輯器

現在是最後一點，您可以透過鉤子 mce_css 包含此格式的自定義 CSS 。

/**
 * Apply styles to the visual editor
 */  
add_filter( 'mce_css', 'fb_mcekit_editor_style');
function fb_mcekit_editor_style($url) {

    if ( ! empty( $url ) )
        $url .= ',';

    // Retrieves the plugin directory URL
    // Change the path here if using different directories
    $url .= trailingslashit( plugin_dir_url( __FILE__ ) ) . '/my-editor-styles.css';

    return $url;
}

不要忘記將此樣式表規則新增到前端樣式表。

刪除格式按鈕

作為增強功能，您可以透過檢查按鈕陣列中的值來刪除 formatselect 下拉按鈕。將 fb_mce_editor_buttons 的函式 mce_buttons_2 加入到函式 fb_mce_editor_buttons 中。

$value = array_search( 'formatselect', $buttons );
if ( FALSE !== $value ) {
    foreach ( $buttons as $key => $value ) {
        if ( 'formatselect' === $value )
            unset( $buttons[$key] );
    }
}

次佳解決方案

每個 this answer，獲取樣式出現在下拉選單中的關鍵是 unset($settings['preview_styles']);

add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );
function fb_mce_before_init( $settings ) {

    // customize as desired

    // unset the preview styles
    unset($settings['preview_styles']);`

    return $settings;
}

參考文獻

TinyMCE: adding CSS to format dropdown

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

WordPress TinyMCE：將 CSS 新增到格式下拉選單