WordPress 3.9+ TinyMCE 4 Podešavanja: Dodavanje stilova, gumba, fontova, padajućeg pada i skočnih prozora

Jedno od mojih najdražih ažuriranja u programu WordPress 3.9 bilo je stvaranje jezgre TinyMCE verzije 4.0. Novi TinyMCE izgleda čistije (stvarno se podudara s WP nadzornom pločom) i ima zaista lijepu dodatnu funkcionalnost. Mnogo starih tema i dodataka moralo je biti ažurirano kako bih radilo s novim TinyMCE pa sam proveo neko vrijeme kopajući API i smisliti neke super stvari. U nastavku ću vam dati nekoliko primjera kako možete proširiti funkcionalnost TinyMCE-a. Neću vas provesti kroz sve korake ili ono što kôd točno znači (ovo je namijenjeno programerima), ali pružit ću vam točan kôd koji možete kopirati / zalijepiti u svoju temu ili dodatak, a zatim prilagoditi.


Dodavanje veličine fonta i odabira grupe fontova

Prilagođeni fontovi i veličine slova ne dodaju se u TinyMCE uređivač. Funkcija u nastavku dodati će oba padajuća izbornika krajnje lijevo od uređivača u drugom redu. Jednostavno promijenite gdje piše “mce_buttons_2” ako ga želite u drugom retku (npr. Koristite “mce_buttons_3” za 3. red).

// Omogući veličinu fonta i obitelj fonta odabire u uređivaču
if (! function_exists ('wpex_mce_buttons')) {
funkcija wpex_mce_buttons ($ gumbi) {
array_unshift ($ gumbi, 'fontselect'); // Dodaj izbor fonta
array_unshift ($ gumbi, 'fontsizeselect'); // Dodaj veličinu slova za odabir
vratiti $ gumbe;
}
}
add_filter ('mce_buttons_2', 'wpex_mce_buttons');

Dodavanje prilagođenih veličina fonta

Veličina fonta prema zadanom je postavljena na pt vrijednosti, što nije uvijek idealno. Radije koristim vrijednosti piksela (12px, 13px, 14px, 16px..etc) i pružam dodatne mogućnosti za fleksibilnost rerne. Donja funkcija izmijenit će zadane mogućnosti veličine fonta u padajućem izborniku.

// Prilagodite veličine fonta urednika mce
if (! function_exists ('wpex_mce_text_s veličine')) {
funkcija wpex_mce_text_s veličine ($ initArray) {
$ initArray ['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
vrati $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_text_s veličine');

Dodavanje prilagođenih fontova

Zadane opcije fontova u izborniku porodice fontova podrazumijevaju sve “web-safe” fontove, ali što ako želite dodati više fontova u selektor? Možda neki Google fontovi? Bit ćemo vrlo lako pogledati primjer u nastavku.

// Dodavanje prilagođenih fontova na popis fontova
if (! function_exists ('wpex_mce_google_fonts_array')) {
funkcija 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, avangard; Book Antiqua = knjiga antiqua, palatino; Comic Sans MS = comic sans ms, sans-serif; Courier New = kurir novi, kurir; Georgia = georgia, palatino; Helvetica = helvetica; utjecaj = udar, chicago; simbol = simbol; Tahoma = tahoma, arial, helvetica, sans-serif; Terminal = terminal, monako; Times New Roman = puta novi Rimljani, vremena; Trebuchet MS = trebuchet ms, geneva; Verdana = verdana, geneva; Webdings = webdings; Wingdings = krilo, zapf dingbats ';
vrati $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_google_fonts_array');

Primijetite kako sam na gornji kôd dodao “Lato”? To je tako jednostavno! U svojoj Totalnoj WordPress temi zapravo pregledavam bilo koji prilagođeni font koji se koristi na web mjestu kako je definirano na tematskoj ploči i dodajem ih u okvir za odabir tako da su dostupni i za uređivanje vaših postova / stranica (slatko). Ali Kôd SAMO prikazuje obitelj fontova na padajućem izborniku neće magično učitati skriptu tako da kad promijenite svoj tekst u uređivaču, zapravo možete vidjeti da je prilagođeni font primijenjen na njega … To je ono što kod dolje čini!

// Dodajte Google skripte za upotrebu s uređivačem
if (! function_exists ('wpex_mce_google_fonts_styles')) {
funkcija 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));
}
}
dodavanje ('init', 'wpex_mce_google_fonts_styles');

Omogućite padajući izbornik Formati (stilovi) i dodajte nove stilove

Sjećate se padajućeg izbornika “Stilovi” na WP 3.8? To je bilo super! Možete ga koristiti za dodavanje lepih klasa koje će se koristiti u uređivaču postova (zapravo ga koristim na WPExplorer-u za gumbe, obojene raspone, kutije … itd). Na WP 3.9 još uvijek možete dodati stilove, međutim, novi TinyMCE 4.0 je preimenovan u “Formats” tako da djeluje malo drugačije. Ispod je primjer kako omogućiti padajući izbornik Formati i ujedno dodati neke nove stavke.

WordPress TInyMCE Format padajućeg izbornika

Omogući padajući izbornik Formati

To se zapravo radi na isti način prije WP 3.9, ali dijelim slučaj da niste znali kako to učiniti.

// Dodaj MCE padajućem izborniku Formati
if (! function_exists ('wpex_style_select')) {
funkcija wpex_style_select ($ gumbi) {
array_push ($ gumbi, 'styleselect');
vratiti $ gumbe;
}
}
add_filter ('mce_buttons', 'wpex_style_select');

Dodajte nove stavke u formate

Dodavanje novih stavki vrlo je jednostavno. Napominjemo kako sam dodao “$ postavke [‘style_formats_merge’] = true;” na kôd dolje, to osigurava da se vaše izmjene dodaju padajućem izborniku formata zajedno s bilo kojim drugim – nemojte prepisivati ​​cijelu stvar (možda će i drugi dodaci to htjeti iskoristiti).

// Dodajte nove stilove na padajući izbornik TinyMCE "formati"
if (! function_exists ('wpex_styles_dropdown')) {
funkcija wpex_styles_dropdown ($ postavke) {

// Stvorite niz novih stilova
$ new_styles = niz (
array (
'title' => __ ('Prilagođeni stilovi', 'wpex'),
'items' => niz (
array (
'title' => __ ('Gumb za temu', 'wpex'),
'selector' => 'a',
'klase' => 'gumb-tema'
),
array (
'title' => __ ('Istaknuto', 'wpex'),
'inline' => 'raspon',
'class' => 'isticanje teksta',
),
),
),
);

// Spajanje starih i novih stilova
$ settings ['style_formats_merge'] = istina;

// Dodavanje novih stilova
$ settings ['style_formats'] = json_encode ($ new_styles);

// Vrati nove postavke
vratiti $ postavke;

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

Dodavanje jednostavnog gumba MCE

Dodavanje novog gumba u uređivač TinyMCE posebno je korisno za kratke kodove jer kao korisnik ne morate se prisjećati nijedne kratke šifre jednostavno možete kliknuti gumb i on ga umetnuo. Ne kažem dodati TinyMCE 100 gumba za sve vaše kratke kodove (mrzim kada to rade programeri, to je tako loša praksa i izgleda grozno), ali ako dodate 1 ili nekoliko, pustit ću to da prođe. Ako Ako želite dodati hrpu, trebali biste stvoriti podizbornik kao što je objašnjeno u sljedećem odjeljku.

WordPress MCE Novo dugme

PHP kôd – prijavite novi MCE dodatak u WP-u

Ovaj kôd deklarira vaš novi MCE dodatak, pripazite da promijenite lokaciju javascript datoteke “mce-button.js” da odgovara lokaciji vaše datoteke (za što ću vam dati i kod u sljedećem pododjeljku). kao očito preimenovati prefiks “moj” u nešto jedinstvenije!

// Spoji vaše funkcije na ispravne filtre
funkcija my_add_mce_button () {
// provjera korisničkih dozvola
if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
povratak;
}
// provjerite je li omogućen WYSIWYG
if ('true' == get_user_option ('rich_editing')) {
add_filter ('mce_external_plugins', 'my_add_tinymce_plugin');
add_filter ('mce_buttons', 'my_register_mce_button');
}
}
dodavanje ('admin_head', 'my_add_mce_button');

// Deklariranje skripte za novi gumb
funkcija my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js';
vratiti $ plugin_array;
}

// Registrirajte novi gumb u uređivaču
funkcija my_register_mce_button ($ gumbi) {
array_push ($ gumbi, 'my_mce_button');
vratiti $ gumbe;
}

JS kod – Dodajte gumb za MCE

Ovaj js kôd ide u js datoteku registriranu u gornjem isječku u funkciji “symple_shortcodes_add_tinymce_plugin”. Ovome treba dodati novi tekstni gumb koji na vašem uređivaču kaže “Novo dugme”, a kad ga kliknete, umetnite tekst “WPExplorer.com je sjajan!” (naravno).

(funkcija () {
tinymce.PluginManager.add ('my_mce_button', funkcija (editor, url) {
editor.addButton ('my_mce_button', {
tekst: 'Novo dugme',
ikona: false,
onclick: function () {
editor.insertContent ('WPExplorer.com je sjajan!');
}
});
});
}) ();

Dodajte prilagođenu ikonu svom novom gumbu MCE

Iznad sam vam pokazao kako dodati novi gumb koji će se u uređivaču prikazati kao “Novo dugme”, ovo je pomalo hrom … Dakle, promijenjeni kôd pokazat će vam kako dodati svoju prilagođenu ikonu.

Učitajte tablicu stila pomoću CSS-a

Upotrijebite ovu funkciju za učitavanje novog tablice stilova za upotrebu na vašoj administracijskoj ploči – neki dodaci / teme možda dodaju tablicu stilova, tako da ako vaša tema / dodatak to preskoči, dodajte svoj prilagođeni CSS i podesite js (prikazano u nastavku).

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

Vaš prilagođeni CSS

Ovo je CSS za dodavanje prethodno učitane tablice stilova.

i.my-mce-ikona {
pozadinska slika: url ('VAŠ ICON URL');
}

Podešavanje vašeg Javascripta

Sada jednostavno ugađajte JavaScript koji ste prethodno dodali da biste uklonili tekstualni parametar, a umjesto da ikonu postavite na laž, dajte joj prilagođeno ime naziva.

(funkcija () {
tinymce.PluginManager.add ('my_mce_button', funkcija (editor, url) {
editor.addButton ('my_mce_button', {
ikona: 'moja-mce-ikona',
onclick: function () {
editor.insertContent ('WPExplorer.com je sjajan!');
}
});
});
}) ();

Dodavanje gumba s podizbornika

Podmeni izbornika MCE

Ranije sam spomenuo da je dodavanje tone novih ikona na traku TinyMCE loša ideja (i jest), pa pogledajte kôd u nastavku kako biste vidjeli kako možete urediti javascript kako biste prikazali podizbornik za svoj prilagođeni gumb. Ako ga želite vidjeti u akciji, pogledajte moju Video kratki kôd simbola.

(funkcija () {
tinymce.PluginManager.add ('my_mce_button', funkcija (editor, url) {
editor.addButton ('my_mce_button', {
tekst: "Uzorak pada",
ikona: false,
vrsta: 'menubutton',
izbornik: [
{
tekst: 'Točka 1',
izbornik: [
{
tekst: 'Podstavka 1',
onclick: function () {
editor.insertContent ('WPExplorer.com je sjajan!');
}
},
{
tekst: 'Podstavka 2',
onclick: function () {
editor.insertContent ('WPExplorer.com je sjajan!');
}
}
]
},
{
tekst: 'Točka 2',
izbornik: [
{
tekst: 'Podstavka 1',
onclick: function () {
editor.insertContent ('WPExplorer.com je sjajan!');
}
},
{
tekst: 'Podstavka 2',
onclick: function () {
editor.insertContent ('WPExplorer.com je sjajan!');
}
}
]
}
]
});
});
}) ();

Dodavanje skočnog prozora vašem gumbu na klik

U gornjem primjeru možete primijetiti da svaki gumb jednostavno ubacuje tekst “WPExplorer.com je sjajan!” što je u redu, ali što je sa stvaranjem skočnog prozora gdje korisnik može promijeniti ono što se umetne u tekst? Sad bi to bilo slatko! I nešto sam dodao u verziji 1.6 svojih Sympt Shortcodes, što dodatak čini mnogo korisnijim.

WordPress MCE skočni prozor

(funkcija () {
tinymce.PluginManager.add ('my_mce_button', funkcija (editor, url) {
editor.addButton ('my_mce_button', {
tekst: "Uzorak pada",
ikona: false,
vrsta: 'menubutton',
izbornik: [
{
tekst: 'Točka 1',
izbornik: [
{
tekst: 'Pop-up',
onclick: function () {
editor.windowManager.open ({
naslov: 'Umetni slučajni kratki kod',
tijelo: [
{
vrsta: 'textbox',
ime: 'textboxName',
naljepnica: 'Text Box',
vrijednost: '30'
},
{
vrsta: 'textbox',
ime: 'multilineName',
naljepnica: 'Multiline Text Box',
vrijednost: 'Ovdje možete reći puno stvari',
multiline: istina,
minWidth: 300,
min Visina: 100
},
{
tip: 'listbox',
ime: 'listboxName',
naljepnica: 'List Box ",
'vrijednosti': [
{tekst: 'Opcija 1', vrijednost: '1'},
{tekst: 'Opcija 2', vrijednost: '2'},
{tekst: 'Opcija 3', vrijednost: '3'}
]
}
],
na slanje: funkcija (e) {
editor.insertContent ('[random_shortcode textbox = "' + e.data.textboxName + '" multiline = "' + e.data.multilineName + '" listbox = "' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
}) ();

U redu je … Što sad?

Dobro pitanje! Sada je vrijeme da iskoristite ove fantastične promjene i krenete nešto epsko ili ažurirate svoje dodatke / teme kako bi bili kompatibilni s novim TinyMCE-om u WordPressu 3.9. Javite mi što vam ide u komentarima ispod!

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