posso aggiungere un formato personalizzato all'opzione formato nel pannello di testo?


16

Nell'editor di testo, dove è possibile impostare intestazioni e altre impostazioni, è possibile aggiungere i propri stili da usare per i clienti? e anche rimuovere quelli inutili?


2
WP3 e TinyMCE sono così incasinati in questo aspetto. Non riesco a credere che non sia possibile aggiungere o personalizzare facilmente questi dannati formati come in CKEditor.
Cherouvim,

1
Sono d'accordo, è un dolore totale.
Lieve Fuzz,

Risposte:


17

L'editor "classico" di TinyMCE ha due menu a discesa: formatselectper gli stili di paragrafo e styleselectper gli stili di carattere - che possono contenere anche stili di paragrafo, per renderlo più confuso. La configurazione in WordPress per impostazione predefinita mostra solo il menu a discesa del formato . Se applichi un foglio di stile personalizzato all'editor, TinyMCE può utilizzarlo per raccogliere i nomi delle classi e aggiungerli al menu a discesa degli stili , ma questo non ha funzionato ogni volta per me.

Da 3.0 puoi chiamare il add_editor_style()tuo functions.phpper aggiungere un foglio di stile all'editor. Per impostazione predefinita, si trova editor-style.cssnella directory del tema. Prima di 3.0 devi agganciarti al mce_cssfiltro per aggiungere l'URL al tuo foglio di stile dell'editor. Questo finirà nella il content_cssvalore di configurazione TinyMCE .

Per aggiungere il menu a discesa dello stile , l' styleselectopzione deve apparire in uno degli array di configurazione della barra dei pulsanti ( theme_advanced_buttons[1-4]in TinyMCE, filtrato mce_buttons_[1-4]in WordPress). L'elenco dei formati di blocco è controllata da l' theme_advanced_blockformatsopzione di TinyMCE , che è possibile aggiungere alla matrice di controllo nel tiny_mce_before_initfiltro. Se vuoi personalizzare i nomi del menu a discesa dello stile (non solo i nomi delle tue classi CSS), guarda l' theme_advanced_stylesopzione . Puoi anche usare l' style_formatsopzione più avanzata che ti dà più flessibilità per definire gli stili.

Il relativo codice PHP con tutti gli hook e la configurazione predefinita è wp-admin/includes/post.phpin funzionewp_tiny_mce() . Tutti insieme, la tua configurazione potrebbe assomigliare a questa:

add_action( 'after_setup_theme', 'wpse3882_after_setup_theme' );
function wpse3882_after_setup_theme()
{
    add_editor_style();
}

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

add_filter('tiny_mce_before_init', 'wpse3882_tiny_mce_before_init');
function wpse3882_tiny_mce_before_init($settings)
{
    $settings['theme_advanced_blockformats'] = 'p,h1,h2,h3,h4';

    // From http://tinymce.moxiecode.com/examples/example_24.php
    $style_formats = array(
        array('title' => 'Bold text', 'inline' => 'b'),
        array('title' => 'Red text', 'inline' => 'span', 'styles' => array('color' => '#ff0000')),
        array('title' => 'Red header', 'block' => 'h1', 'styles' => array('color' => '#ff0000')),
        array('title' => 'Example 1', 'inline' => 'span', 'classes' => 'example1'),
        array('title' => 'Example 2', 'inline' => 'span', 'classes' => 'example2'),
        array('title' => 'Table styles'),
        array('title' => 'Table row 1', 'selector' => 'tr', 'classes' => 'tablerow1'),
    );
    // Before 3.1 you needed a special trick to send this array to the configuration.
    // See this post history for previous versions.
    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;
}

c'è un formato speciale che il .css dovrebbe prendere usando add_editor_style? non sembra succedere nulla
Mild Fuzz,

1
@Mild Fuzz: la mia risposta precedente era fuorviante perché WordPress mostra solo uno dei due menu a discesa necessari. Ho aggiornato la mia risposta con un modo per aggiungere il secondo menu a discesa e come controllarlo.
Jan Fabry,

1
@Mild Fuzz: i parametri per i diversi style_formatselementi sono spiegati nella relativa formatspagina wiki.
Jan Fabry,

1
no longr produce errori, ma non ha alcun effetto!
Lieve Fuzz,

1
json_encode genera "e non", quindi javascript si interrompe. Devi fare str_replace ('"'," '", json_encode ($ style_formats))
cherouvim,

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.