web-dev-qa-db-ja.com

カスタムTinyMCEスタイルフォーマットは無効

TinyMCE WordPressエディタ用にdropdownスタイルのTinyMCEを作成しました。

フォーマットはエディタ上では期待どおりに表示されていますが、ドロップダウンがスタイルから選択するように拡張されていると、無効として表示されています。私のコードは下に添付されています。

Drop down options showing grey & disabled

function new_mce_button($buttons) {

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

}
add_filter('mce_buttons_2', 'new_mce_button');

/**
 * Callback function to filter the MCE settings
 */
function custom_formats( $init_array ) {  

    $style_formats = array(
        array(
            'title' => 'White Button',
            'selector' => 'a',
            'classes' => 'cta wht',
        ),
        array(
            'title' => 'Grey Button',
            'selector' => 'a',
            'classes' => 'cta gry'
        ),
        array(
            'title' => 'Light Blue Button',
            'selector' => 'a',
            'classes' => 'cta lblue'
        ),
        array(
            'title' => 'Dark Blue Button',
            'selector' => 'a',
            'classes' => 'cta dblue'
        ),
    );  

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

    return $init_array;  

} 
add_filter( 'tiny_mce_before_init', 'custom_formats' );
tinymceeditorvisual-editordropdown
1
estin92

@karunが指摘したように、テキストは最初にハイパーリンクにする必要があり、その後フォーマットはアクティブになりました。

配列の値を

array(
  'title' => 'Grey Button',
  'block' => 'div',
  'classes' => 'cta gry'
),

スタイルを恒久的に利用可能にしました。

1
estin92