TinyMCE: dodanie CSS do rozwijanego menu formatowania

Pomyślnie dodałem arkusz stylów TinyMCE za pomocą add_editor_style (), dzięki czemu mogę wyświetlić podgląd stylów w treści edytora TinyMCE.

Czy mam jednak rację, zakładając, że funkcja add_editor_style () może uzyskać dostęp tylko do stylu edytora?

Jeśli tak, to czy istnieje inna metoda lub funkcja, której mogę użyć, aby uzyskać dostęp do stylizacji menu rozwijanego Format TinyMCE?

Nie można ulepszyć listy rozwijanej formatselect. Ale możesz ulepszyć za pomocą haka tiny_mce_before_initpo drugiej rozwijanej liście styleselect, w domyślnej instalacji WordPress jest ukryta. Dokumentacja listę wszystkich ustawień domyślnych i możliwości.

• inline - nazwa elementu inline, który ma być produkowany na przykład „span”. Bieżący wybór tekstu zostanie zawinięty w ten element wbudowany.
• blok - nazwa elementu bloku, który ma być produkowany, na przykład „h1”. Istniejące elementy bloku w zaznaczeniu zostaną zastąpione nowym elementem bloku.
• selektor - wzorzec selektora CSS 3, aby znaleźć elementy w obrębie wyboru według. Można tego użyć do zastosowania klas do określonych elementów lub złożonych rzeczy, takich jak nieparzyste wiersze w tabeli.
• klas - Rozdzielona spacjami lista klas do zastosowania wybranych elementów lub nowego elementu śródliniowego / blokowego.
• styles - Nazwa / wartość obiektu z CSS tyle elementów do zastosowania, takich jak kolor itp.
• atrybuty - Obiekt nazwa / wartość z atrybutami do zastosowania do wybranych elementów lub nowego elementu śródliniowego / bloku.
• ścisłe - wyłącza funkcję scalania podobnych stylów, gdy jest używana. Jest to potrzebne w przypadku niektórych problemów z dziedziczeniem CSS, takich jak dekoracja tekstu dla podkreślenia / przekreślenia.
• wrapper - Stan informujący, że bieżący format jest formatem kontenera dla elementów blokowych. Na przykład opakowanie div lub cytat blokowy.

Przycisk stylu

Zauważ, że domyślnie menu Styl jest ukryte w WordPress. Najpierw dodaj przycisk niestandardowych formatów do paska menu TinyMCE, na przykład w wierszu 2 z hakiem mce_buttons_2.

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

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

Niestandardowe style

Następnie popraw listę rozwijaną tego przycisku. Przydatne jest również ulepszenie poprzez dodatkową wartość w tablicy, patrz kodeks dla tego przykładu.

/**
 * 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;

}

Wynik

Ulepszone menu rozwijane

Możesz także ulepszyć menu rozwijane za pomocą menu drzewa. Utwórz var z przykładowego źródła powyżej z większą strukturą w tablicy, podobnie jak następujące źródło.

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

Aby uzyskać więcej możliwości i parametrów, zobacz domyślne wartości pola rozwijanego Format stylu (napisz 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'}
    ]}
];

Dodaj niestandardowy arkusz stylów do edytora

Ostatnim punktem jest dołączenie niestandardowego css dla tych formatów przez hook mce_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;
}

Nie zapomnij dodać zasad tego arkusza stylów również do arkusza stylów interfejsu użytkownika.

Usuń przycisk Format

Jako rozszerzenie możesz usunąć przycisk formatselectrozwijany poprzez sprawdzenie wartości w tablicy przycisków. Dodaj następujące źródło do funkcji fb_mce_editor_buttonsna haku mce_buttons_2.

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

Zgodnie z tą odpowiedzią kluczem do wyświetlenia stylów w menu rozwijanym jestunset($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;
}

Bardzo pomocny i dziękuję za defaultstyleswskazówki. Odkryłem, że scalanie tablic nie działało, dopóki nie skonwertowałem domyślnych opcji na prawidłowy JSON (niepoprawny JavaScript). Poniżej pozwala na dodanie listy rozwijanej tinymce WordPress zamiast zamiany

Opcje domyślne (JSON):

$defaults = '[{ "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" }
        ] }
 ]'; 

W functions.php zwraca większy skrót opcji:

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

    $style_formats = array(
    //....

    $settings['style_formats'] = json_encode( array_merge( json_decode($defaults), $style_formats ) );
    return $settings;
}