Posso aggiungere un formato personalizzato alle opzioni di formato nel pannello di testo?

Question

Posso aggiungere un formato personalizzato alle opzioni di formato nel pannello di testo?

10 nov 2010, 16:42:59

Visualizzazioni: 20.6K

Voti: 18

Nell'editor di testo, dove è possibile impostare titoli e altre impostazioni, è possibile aggiungere i propri stili per l'utilizzo da parte dei clienti? E anche rimuovere quelli non necessari?

Mild Fuzz

4.2K

formattazione testo

Commenti

WP3 e TinyMCE sono così confusi sotto questo aspetto. Non riesco a credere che non sia possibile aggiungere o personalizzare facilmente i dannati formati come invece si può fare in CKEditor.

cherouvim

10 dic 2010 22:43:09

Concordo, è davvero una rottura.

Mild Fuzz

11 dic 2010 20:36:36

Tutte le risposte alla domanda

Commenti

esiste un formato specifico che il file .css dovrebbe seguire quando si usa add_editor_style? non sembra succedere nulla

Mild Fuzz

10 nov 2010 17:25:31

Ancora nessun successo nel capire come aggiungere classi al menu a tendina dei formati oltre a quelle predefinite.

Mild Fuzz

11 nov 2010 14:52:07

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

Jan Fabry

11 nov 2010 15:39:58

Sei un mito!! Non sono sicuro di cosa faccia 'style_formats', ma 'theme_advanced_styles' fa esattamente quello che mi serve!!

Mild Fuzz

11 nov 2010 15:47:15

Sto davvero cercando di far funzionare quel secondo blocco, perché sembrerebbe estremamente utile. Il problema è che $settings['style_formats'] è null prima di impostarlo, quindi non posso confrontare i formati con nulla.

Mild Fuzz

11 nov 2010 16:35:46

Mostra i restanti 8 commenti

Puoi aggiungere un formato personalizzato o rimuoverne uno esistente in questo modo:

add_filter('tiny_mce_before_init', function($init_array) {
    $init_array['formats'] = json_encode([
        // aggiunge un nuovo formato ai formati esistenti
        'h3marked' => [
            'selector' => 'h3',
            'block'    => 'h3',
            'classes'  => 'article-paragraph',
        ],
    ], JSON_THROW_ON_ERROR);

    // rimuove da questo array i formati non necessari
    $block_formats = [
        'Paragrafo=p',
        'Titolo 1=h1',
        'Titolo 2=h2', 
        'Titolo 3=h3',
        'Titolo 3 evidenziato=h3marked',    // utilizza il nuovo formato nel selettore
        'Titolo 4=h4',
        'Titolo 5=h5',
        'Titolo 6=h6',
        'Preformattato=pre',
    ];
    $init_array['block_formats'] = implode(';', $block_formats);

    return $init_array;
});

Vedi di più in questo articolo e nella documentazione di tinymce

Vasyl

61

1 apr 2021 13:35:18

Come indicato qui Il menu a discesa dei formati TinyMCE non mostra più l'anteprima degli stili

Kara aveva ragione, è necessario rimuovere gli stili predefiniti per vedere i nuovi stili...

unset($init['preview_styles']);

return $settings;

user2136473

1

25 feb 2016 23:36:54

Commenti

Per favore, aggiungi maggiori dettagli, ad esempio non è chiaro cosa sia $settings qui. Grazie

birgire

25 feb 2016 23:50:43

Jan Fabry 30.5K · Accepted Answer · 2010-11-10T16:59:18Z

L'editor "classico" di TinyMCE ha due menu a discesa: formatselect per stili di paragrafo e styleselect per stili di carattere - che può anche contenere stili di paragrafo, rendendo il tutto più confuso. La configurazione in WordPress di default mostra solo il menu a discesa format. Se applichi un foglio di stile personalizzato all'editor, TinyMCE può utilizzarlo per rilevare i nomi delle classi e aggiungerli al menu a discesa style - ma questo non ha sempre funzionato per me.

Dalla versione 3.0 puoi chiamare add_editor_style() nel tuo functions.php per aggiungere un foglio di stile all'editor. Di default è editor-style.css nella directory del tuo tema. Prima della 3.0 devi agganciarti al filtro mce_css per aggiungere l'URL del tuo foglio di stile dell'editor. Questo finirà in il valore di configurazione content_css di TinyMCE.

Per aggiungere il menu a discesa style, l'opzione styleselect deve apparire in uno degli array di configurazione della barra dei pulsanti (theme_advanced_buttons[1-4] in TinyMCE, filtrati da mce_buttons_[1-4] in WordPress). La lista dei formati di blocco è controllata da l'opzione theme_advanced_blockformats di TinyMCE, che puoi aggiungere all'array di controllo nel filtro tiny_mce_before_init. Se vuoi personalizzare i nomi del menu a discesa style (non solo i nomi delle tue classi CSS), guarda l'opzione theme_advanced_styles. Puoi anche usare l'opzione più avanzata style_formats che ti dà maggiore flessibilità nel definire gli stili.

Il codice PHP rilevante con tutti gli hook e la configurazione di default si trova in wp-admin/includes/post.php, nella funzione wp_tiny_mce(). Mettendo tutto 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';

    // Da http://tinymce.moxiecode.com/examples/example_24.php
    $style_formats = array(
        array('title' => 'Testo grassetto', 'inline' => 'b'),
        array('title' => 'Testo rosso', 'inline' => 'span', 'styles' => array('color' => '#ff0000')),
        array('title' => 'Intestazione rossa', 'block' => 'h1', 'styles' => array('color' => '#ff0000')),
        array('title' => 'Esempio 1', 'inline' => 'span', 'classes' => 'example1'),
        array('title' => 'Esempio 2', 'inline' => 'span', 'classes' => 'example2'),
        array('title' => 'Stili tabella'),
        array('title' => 'Riga tabella 1', 'selector' => 'tr', 'classes' => 'tablerow1'),
    );
    // Prima della 3.1 serviva un trucco speciale per inviare questo array alla configurazione.
    // Vedi la cronologia di questo post per le versioni precedenti.
    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;
}