WordPress 3.9+ TinyMCE 4 Tweaks: aggiunta di stili, pulsanti, caratteri, menu a discesa e pop-up

Uno dei miei aggiornamenti preferiti in WordPress 3.9 è stato il core TinyMCE versione 4.0. Il nuovo TinyMCE ha un aspetto più pulito (si adatta davvero al cruscotto WP) e ha alcune funzionalità aggiuntive davvero belle. Molti dei miei vecchi temi e plugin dovevano essere aggiornati per funzionare con il nuovo TinyMCE, quindi ho trascorso un po ‘di tempo a scavare l’API e capire alcune cose interessanti. Di seguito ti fornirò alcuni esempi su come estendere le funzionalità di TinyMCE. Non ti guiderò attraverso tutti i passaggi o cosa significhi esattamente il codice (questo è destinato agli sviluppatori) ma ti fornirò il codice esatto che puoi copiare / incollare nel tuo tema o plugin e quindi modificare di conseguenza.


Aggiunta della dimensione del carattere e selezione della famiglia di caratteri

Per impostazione predefinita, i caratteri personalizzati e le dimensioni dei caratteri non vengono aggiunti nell’editor TinyMCE. La funzione seguente aggiungerà entrambi questi menu a discesa all’estrema sinistra dell’editor nella seconda riga. Cambia semplicemente dove dice “mce_buttons_2” se lo desideri in una riga diversa (es: usa “mce_buttons_3” per la 3a riga).

// Abilita la dimensione del carattere e la selezione della famiglia di caratteri nell'editor
if (! function_exists ('wpex_mce_buttons')) {
funzione wpex_mce_buttons ($ pulsanti) {
array_unshift ($ pulsanti, 'fontselect'); // Aggiungi selezione font
array_unshift ($ pulsanti, 'fontsizeselect'); // Aggiungi selezione dimensione carattere
restituisce $ pulsanti;
}
}
add_filter ('mce_buttons_2', 'wpex_mce_buttons');

Aggiunta di dimensioni dei caratteri personalizzate

Per impostazione predefinita, le dimensioni del carattere sono impostate su valori pt che non sono sempre ideali. Preferisco usare i valori di pixel (12px, 13px, 14px, 16px..etc) e fornire più opzioni per la flessibilità della grattugia. La funzione seguente modifica le opzioni di dimensione del carattere predefinite nel selettore a discesa.

// Personalizza le dimensioni dei caratteri dell'editor mce
if (! function_exists ('wpex_mce_text_sizes')) {
funzione wpex_mce_text_sizes ($ initArray) {
$ initArray ['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
restituisce $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_text_sizes');

Aggiunta di caratteri personalizzati

Le opzioni di carattere predefinite nel selettore della famiglia di caratteri sono tutti caratteri “sicuri per il web” per impostazione predefinita, ma cosa succede se si desidera aggiungere più caratteri al selettore? Forse alcuni caratteri di Google? Sarà davvero facile dare un’occhiata all’esempio qui sotto.

// Aggiungi caratteri personalizzati all'elenco Caratteri
if (! function_exists ('wpex_mce_google_fonts_array')) {
funzione wpex_mce_google_fonts_array ($ initArray) {
$ initArray ['font_formats'] = 'Lato = Lato; Andale Mono = andale mono, times; Arial = arial, helvetica, sans-serif; Arial Black = arial black, avant garde; Libro Antiqua = book antiqua, palatino; Comic Sans MS = comic sans ms, sans-serif; Courier New = corriere nuovo, corriere; Georgia = georgia, palatino; Helvetica = helvetica; Impact = impact, chicago; Symbol = symbol; Tahoma = tahoma, arial, helvetica, sans-serif; Terminal = terminal, monaco; Times New Roman = times new roman, times; Trebuchet MS = trebuchet ms, geneva; Verdana = verdana, geneva; Webdings = webdings; Wingdings = wingdings, zapf dingbats ';
restituisce $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_google_fonts_array');

Notate come ho aggiunto “Lato” all’elenco nel codice sopra? È così semplice! Nel mio tema Total WordPress in realtà eseguo il ciclo di qualsiasi carattere personalizzato utilizzato sul sito come definito nel pannello del tema e li aggiungo alla casella di selezione in modo che siano disponibili anche durante la modifica dei tuoi post / pagine (dolce). Ma il codice pubblicizza SOLO la famiglia di caratteri nel menu a discesa, non caricherà magicamente lo script in modo tale che quando cambi il testo nell’editor puoi effettivamente vedere quel carattere personalizzato applicato ad esso … Ecco cosa fa il codice qui sotto!

// Aggiungi gli script di Google da utilizzare con l'editor
if (! function_exists ('wpex_mce_google_fonts_styles')) {
funzione wpex_mce_google_fonts_styles () {
$ font_url = 'http://fonts.googleapis.com/css?family=Lato:300.400.700';
add_editor_style (str_replace (',', '% 2C', $ font_url));
}
}
add_action ('init', 'wpex_mce_google_fonts_styles');

Abilita il menu a discesa Formati (stili) e aggiungi nuovi stili

Ricorda il menu a discesa “Stili” in WP 3.8? È stato fantastico! Potresti usarlo per aggiungere alcune classi interessanti da utilizzare all’interno dell’editor dei post (lo uso su WPExplorer in realtà per pulsanti, span colorati, scatole … ecc). In WP 3.9 puoi ancora aggiungere stili, tuttavia, è stato rinominato nel nuovo TinyMCE 4.0 in “Formati”, quindi funziona in modo leggermente diverso. Di seguito è riportato un esempio di come abilitare il menu a discesa Formati e aggiungere anche alcuni nuovi elementi.

Menu a discesa Formati WordPress TInyMCE

Abilita il menu a discesa Formati

Questo è effettivamente fatto allo stesso modo prima del WP 3.9, ma sto condividendo nel caso in cui non sapessi come farlo.

// Aggiungi menu a discesa dei formati a MCE
if (! function_exists ('wpex_style_select')) {
funzione wpex_style_select ($ pulsanti) {
array_push ($ pulsanti, 'styleselect');
restituisce $ pulsanti;
}
}
add_filter ('mce_buttons', 'wpex_style_select');

Aggiungi nuovi elementi ai formati

L’aggiunta di nuovi elementi è semplicissima. Nota come ho aggiunto “$ settings [” style_formats_merge “] = true;” al codice qui sotto, questo assicura che le tue modifiche vengano aggiunte al menu a discesa dei formati insieme ad altri – non sovrascrivere l’intera cosa (forse anche altri plugin vogliono farne uso).

// Aggiungi nuovi stili al menu a discesa dei "formati" di TinyMCE
if (! function_exists ('wpex_styles_dropdown')) {
funzione wpex_styles_dropdown ($ settings) {

// Crea una serie di nuovi stili
$ new_styles = array (
Vettore(
'title' => __ ('Stili personalizzati', 'wpex'),
'items' => array (
Vettore(
'title' => __ ('Button Theme', 'wpex'),
'selector' => 'a',
'classi' => 'pulsante tema'
),
Vettore(
'title' => __ ('Evidenzia', 'wpex'),
'inline' => 'span',
'classes' => 'text-highlight',
),
),
),
);

// Unisci stili vecchi e nuovi
$ settings ['style_formats_merge'] = true;

// Aggiungi nuovi stili
$ settings ['style_formats'] = json_encode ($ new_styles);

// Restituisce nuove impostazioni
restituisce $ settings;

}
}
add_filter ('tiny_mce_before_init', 'wpex_styles_dropdown');

Aggiunta di un semplice pulsante MCE

L’aggiunta di un nuovo pulsante all’editor TinyMCE è particolarmente utile per gli shortcode, poiché come utente non è necessario ricordare alcun shortcode è sufficiente fare clic su un pulsante e lo inserisce. Non sto dicendo di aggiungere centinaia di pulsanti a TinyMCE per tutti i tuoi codici brevi (odio quando gli sviluppatori lo fanno, è una cattiva pratica e sembra orribile) ma se aggiungi 1 o pochi lo lascerò passare �� Se tu vuoi aggiungere un mazzo, quindi dovresti creare un sottomenu come spiegato nella sezione che segue.

Nuovo pulsante WordPress MCE

Codice PHP – Dichiara il nuovo plugin MCE in WP

Questo codice dichiarerà che il tuo nuovo plug-in MCE assicurerà di cambiare la posizione del file javascript “mce-button.js” in modo che corrisponda alla posizione del tuo file (di cui ti darò il codice anche nella prossima sottosezione) come ovviamente rinominare il prefisso “mio” in qualcosa di più unico!

// Aggancia le tue funzioni ai filtri corretti
funzione my_add_mce_button () {
// controlla le autorizzazioni dell'utente
if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
ritorno;
}
// controlla se WYSIWYG è abilitato
if ('true' == get_user_option ('rich_editing')) {
add_filter ('mce_external_plugins', 'my_add_tinymce_plugin');
add_filter ('mce_buttons', 'my_register_mce_button');
}
}
add_action ('admin_head', 'my_add_mce_button');

// Dichiara lo script per il nuovo pulsante
funzione my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js';
return $ plugin_array;
}

// Registra un nuovo pulsante nell'editor
funzione my_register_mce_button ($ pulsanti) {
array_push ($ buttons, 'my_mce_button');
restituisce $ pulsanti;
}

Codice JS – Aggiungi il pulsante all’MCE

Questo codice js si trova nel file js registrato nello snippet sopra nella funzione “symple_shortcodes_add_tinymce_plugin”. Questo dovrebbe aggiungere un nuovo pulsante di testo che dice “Nuovo pulsante” nel tuo editor e quando viene cliccato inserirà il testo “WPExplorer.com è fantastico!” (ovviamente).

(funzione() {
tinymce.PluginManager.add ('my_mce_button', funzione (editor, url) {
editor.addButton ('my_mce_button', {
testo: "Nuovo pulsante",
icona: falso,
onclick: function () {
editor.insertContent ('WPExplorer.com è fantastico!');
}
});
});
}) ();

Aggiungi un’icona personalizzata al tuo nuovo pulsante MCE

Sopra ti ho mostrato come aggiungere un nuovo pulsante che verrà visualizzato come “Nuovo pulsante” nell’editor, questo è un po ‘zoppo … Quindi il codice modificato ti mostrerà come aggiungere la tua icona personalizzata.

Carica un foglio di stile con il tuo CSS

Usa questa funzione per caricare un nuovo foglio di stile da usare nel tuo pannello di amministrazione – alcuni plugin / temi potrebbero già aggiungere un foglio di stile, quindi se il tuo tema / plugin lo fa salta questo e aggiungi semplicemente il tuo CSS personalizzato e modifica il js (mostrato sotto).

funzione my_shortcodes_mce_css () {
wp_enqueue_style ('symple_shortcodes-tc', plugins_url ('/ css / my-mce-style.css', __FILE__));
}
add_action ('admin_enqueue_scripts', 'my_shortcodes_mce_css');

Il tuo CSS personalizzato

Questo è il CSS per aggiungere il foglio di stile caricato in precedenza.

i.my-mce-icon {
immagine di sfondo: url ("YOUR ICON URL");
}

Modifica il tuo Javascript

Ora modifica semplicemente il javascript che hai aggiunto in precedenza per rimuovere il parametro text e invece di impostare l’icona su false assegnagli un nome di classe personalizzato.

(funzione() {
tinymce.PluginManager.add ('my_mce_button', funzione (editor, url) {
editor.addButton ('my_mce_button', {
icona: 'my-mce-icon',
onclick: function () {
editor.insertContent ('WPExplorer.com è fantastico!');
}
});
});
}) ();

Aggiunta di un pulsante con sottomenu

Sottomenu pulsante MCE

In precedenza ho menzionato che aggiungere una tonnellata di nuove icone alla barra di TinyMCE è una cattiva idea (e lo è) quindi controlla il codice qui sotto per vedere come puoi modificare il javascript per visualizzare un sottomenu per il tuo pulsante personalizzato. Se vuoi vederlo in azione dai un’occhiata al mio Symple Shortcodes Video.

(funzione() {
tinymce.PluginManager.add ('my_mce_button', funzione (editor, url) {
editor.addButton ('my_mce_button', {
testo: "Esempio di menu a discesa",
icona: falso,
tipo: 'menubutton',
menù: [
{
testo: "Articolo 1",
menù: [
{
testo: "Voce secondaria 1",
onclick: function () {
editor.insertContent ('WPExplorer.com è fantastico!');
}
},
{
testo: "Voce secondaria 2",
onclick: function () {
editor.insertContent ('WPExplorer.com è fantastico!');
}
}
]
},
{
testo: "Articolo 2",
menù: [
{
testo: "Voce secondaria 1",
onclick: function () {
editor.insertContent ('WPExplorer.com è fantastico!');
}
},
{
testo: "Voce secondaria 2",
onclick: function () {
editor.insertContent ('WPExplorer.com è fantastico!');
}
}
]
}
]
});
});
}) ();

Aggiunta di una finestra pop-up al pulsante su clic

Nell’esempio sopra potresti notare che ogni pulsante inserisce semplicemente il testo “WPExplorer.com è fantastico!” il che è interessante, ma che dire della creazione di una finestra pop-up in cui un utente può modificare ciò che viene inserito nel testo? Ora sarebbe dolce! Ed è qualcosa che ho aggiunto alla versione 1.6 dei miei Shortple Code, rendendo il plug-in molto più intuitivo.

Finestra a comparsa MCE di WordPress

(funzione() {
tinymce.PluginManager.add ('my_mce_button', funzione (editor, url) {
editor.addButton ('my_mce_button', {
testo: "Esempio di menu a discesa",
icona: falso,
tipo: 'menubutton',
menù: [
{
testo: "Articolo 1",
menù: [
{
testo: 'Pop-Up',
onclick: function () {
editor.windowManager.open ({
titolo: "Inserisci codice casuale",
corpo: [
{
tipo: "casella di testo",
nome: 'textboxName',
etichetta: 'Casella di testo',
valore: '30'
},
{
tipo: "casella di testo",
nome: 'multilineName',
etichetta: 'Casella di testo multilinea',
valore: "Puoi dire un sacco di cose qui",
multilinea: vero,
minLarghezza: 300,
minHeight: 100
},
{
digitare: 'listbox',
nome: 'listboxName',
etichetta: 'Casella di riepilogo',
'valori': [
{testo: 'Opzione 1', valore: '1'},
{testo: "Opzione 2", valore: "2"},
{testo: "Opzione 3", valore: "3"}
]
}
],
onsubmit: function (e) {
editor.insertContent ('[random_shortcode textbox = "' + e.data.textboxName + '" multiline = "' + e.data.multilineName + '" listbox = "' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
}) ();

Questo è fantastico … Ora cosa?

Buona domanda! Ora è il momento per te di prendere queste fantastiche modifiche e andare a creare qualcosa di epico o aggiornare i tuoi plugin / temi per essere compatibile con il nuovo TinyMCE in WordPress 3.9. Fammi sapere cosa ti viene in mente nei commenti qui sotto!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map