TinyMCE: adăugarea CSS în lista derulantă de formatare

Nu puteți îmbunătăți lista drop-down formatselect. Dar puteți îmbunătăți cu ajutorul hook-ului tiny_mce_before_init al doilea meniu drop-down styleselect, care este ascuns în mod implicit în WordPress. Documentația listează toate valorile implicite și posibilitățile.

• inline – Numele elementului inline de generat, de exemplu „span”. Selecția curentă de text va fi înfășurată în acest element inline.
• block – Numele elementului bloc de generat, de exemplu "h1". Elementele bloc existente din selecție vor fi înlocuite cu noul element bloc.
• selector – Model CSS 3 pentru a găsi elemente în selecție. Poate fi folosit pentru a aplica clase unor elemente specifice sau lucruri complexe precum rândurile impare dintr-un tabel.
• classes – Lista de clase separate prin spațiu pentru a fi aplicate elementelor selectate sau noului element inline/bloc.
• styles – Obiect cu perechi nume/valoare pentru elemente CSS de aplicat, cum ar fi culoarea etc.
• attributes – Obiect cu perechi nume/valoare pentru atribute de aplicat elementelor selectate sau noului element inline/bloc.
• exact – Dezactivează funcționalitatea de unificare a stilurilor similare. Este necesar pentru unele probleme de moștenire CSS, cum ar fi text-decoration pentru subliniere/barat.
• wrapper – Specifică faptul că formatul curent este un container pentru elementele bloc. De exemplu, un div wrapper sau blockquote.

Butonul de Stil

Rețineți că, în mod implicit, meniul drop-down Stil este ascuns în WordPress. Mai întâi adăugați butonul pentru formate personalizate într-o bară de meniu TinyMCE, de exemplu pe linia 2 cu hook-ul mce_buttons_2.

add_filter( 'mce_buttons_2', 'fb_mce_editor_buttons' );
function fb_mce_editor_buttons( $buttons ) {
    
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

Stiluri Personalizate

Apoi îmbunătățiți meniul drop-down al acestui buton. De asemenea, este utilă îmbunătățirea prin adăugarea de valori suplimentare în array, consultați codex pentru acest exemplu.

/**
 * Adaugă stiluri/clase la meniul drop-down "Stiluri"
 */ 
add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );

function fb_mce_before_init( $settings ) {

    // Setează true pentru a include setările implicite.
    $settings['style_formats_merge'] = true;
    
    $style_formats = array(
        array(
            'title' => 'Link Descărcare',
            'selector' => 'a',
            'classes' => 'download'
            ),
        array(
            'title' => 'Testul Meu',
            'selector' => 'p',
            'classes' => 'mytest',
        ),
        array(
            'title' => 'AlertBox',
            'block' => 'div',
            'classes' => 'alert_box',
            'wrapper' => true
        ),
        array(
            'title' => 'Text Roșu cu Majuscule',
            'inline' => 'span',
            'styles' => array(
                'color'         => 'red', // sau valoare hex #ff0000
                'fontWeight'    => 'bold',
                'textTransform' => 'uppercase'
            )
        )
    );
    
    $settings['style_formats'] = json_encode( $style_formats );
    
    return $settings;

}
     

Rezultat

Meniu Drop-down Îmbunătățit

De asemenea, puteți îmbunătăți meniul drop-down cu un meniu în arbore. Creați variabila din exemplul de mai sus cu mai multă structură în array, ca în codul următor.

    $style_formats = array(
        array(
            'title' => 'Anteturi',
                'items' => array(
                array(
                    'title' => 'Antet 1',
                    'format' => 'h1',
                    'icon' => 'bold'
                ),
                array(
                    'title' => 'Antet 2',
                    'format' => 'h2',
                    'icon' => 'bold'
                )
            )
        ),
        array(
            'title' => 'Link Descărcare',
            'selector' => 'a',
            'classes' => 'download'
        )
    );

Pentru mai multe posibilități și parametri, consultați valorile implicite ale câmpului Stiluri (scrise în JavaScript).

var defaultStyleFormats = [
    {title: 'Anteturi', items: [
        {title: 'Antet 1', format: 'h1'},
        {title: 'Antet 2', format: 'h2'},
        {title: 'Antet 3', format: 'h3'},
        {title: 'Antet 4', format: 'h4'},
        {title: 'Antet 5', format: 'h5'},
        {title: 'Antet 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: 'Blocuri', items: [
        {title: 'Paragraf', format: 'p'},
        {title: 'Blockquote', format: 'blockquote'},
        {title: 'Div', format: 'div'},
        {title: 'Pre', format: 'pre'}
    ]},

    {title: 'Aliniere', items: [
        {title: 'Stânga', icon: 'alignleft', format: 'alignleft'},
        {title: 'Centru', icon: 'aligncenter', format: 'aligncenter'},
        {title: 'Dreapta', icon: 'alignright', format: 'alignright'},
        {title: 'Justificat', icon: 'alignjustify', format: 'alignjustify'}
    ]}
];

Adăugare Stylesheet Personalizat în Editor

Ultimul pas este să includeți CSS-ul personalizat pentru aceste formate, folosind hook-ul mce_css.

/**
 * Aplică stiluri în editorul vizual
 */  
add_filter( 'mce_css', 'fb_mcekit_editor_style');
function fb_mcekit_editor_style($url) {

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

    // Obține URL-ul directorului pluginului
    // Modificați calea dacă folosiți directoare diferite
    $url .= trailingslashit( plugin_dir_url( __FILE__ ) ) . '/my-editor-styles.css';

    return $url;
}

Nu uitați să adăugați aceste reguli CSS și în stylesheet-ul pentru front end.

Eliminarea Butonului Format

Ca îmbunătățire, puteți elimina butonul drop-down formatselect verificând prezența valorii în array-ul de butoane. Adăugați codul următor în funcția fb_mce_editor_buttons la hook-ul mce_buttons_2.

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