WordPress 3.9+ TinyMCE 4 Tweaks: dodajanje slogov, gumbov, pisav, spustnih padcev in pojavnih oken

Ena mojih najljubših posodobitev v WordPressu 3.9 je bila izdelava jedra TinyMCE različice 4.0. Novi TinyMCE je videti bolj čist (resnično ustreza armaturni plošči WP) in ima resnično lepo dodano funkcionalnost. Mnogo starih tem in vtičnikov je bilo treba posodobiti, da sem lahko delal z novim TinyMCE, tako da sem nekaj časa kopal API in izluščiti nekaj kul stvari. Spodaj vam bom predstavil nekaj primerov, kako lahko razširite funkcionalnost sistema TinyMCE. Ne bom vas sprehodil skozi vse korake ali kaj točno pomeni koda (ta je namenjena razvijalcem), ampak vam bom zagotovil natančno kodo, ki jo lahko kopirate / prilepite v svojo temo ali vtičnik in nato ustrezno prilagodite.


Dodajanje velikosti pisave in izbire družine pisav

Pisave po meri in velikosti pisav se ne privzamejo v urejevalniku TinyMCE. Spodnja funkcija bo dodala obe spustni strani na skrajni levi strani urejevalnika v drugi vrstici. Preprosto spremenite mesto, kjer piše »mce_buttons_2«, če ga želite v drugi vrstici (na primer: za 3. vrstico uporabite »mce_buttons_3«).

// V urejevalniku omogoči velikost pisave in izbere družino pisav
if (! function_exists ('wpex_mce_buttons')) {
funkcija wpex_mce_buttons ($ gumbi) {
array_unshift ($ gumbi, 'fontselect'); // Dodaj izbiro pisave
array_unshift (gumbi $, 'fontsizeselect'); // Dodaj velikost pisave
vrnite $ gumbe;
}
}
add_filter ('mce_buttons_2', 'wpex_mce_buttons');

Dodajanje velikosti pisave po meri

Velikosti pisave so privzeto nastavljene na pt vrednosti, ki niso vedno idealne. Najraje uporabljam vrednosti slikovnih pik (12px, 13px, 14px, 16px..etc) in ponujam več možnosti za prilagodljivost graterja. Spodnja funkcija bo spremenila privzete možnosti velikosti pisave v spustnem izbirniku.

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

Dodajanje pisav po meri

Privzete možnosti pisave v izbirniku družine pisav so privzeto vse pisave, ki so varne po spletu, kaj pa, če želite izbirniku dodati več pisav? Mogoče nekaj Googlovih pisav? Zelo enostavno bomo videli spodnji primer.

// Dodajte pisave po meri na seznam pisav
if (! function_exists ('wpex_mce_google_fonts_array')) {
funkcija wpex_mce_google_fonts_array ($ initArray) {
$ initArray ['font_formats'] = 'Lato = Lato; Andale Mono = andale mono, časi; Arial = arial, helvetica, sans-serif; Arial Black = arial black, avantgarda; Book Antiqua = knjiga antiqua, palatino; Comic Sans MS = comic sans ms, sans-serif; Courier New = kurir nov, kurir; Gruzija = georgia, palatino; Helvetica = helvetica; Učinek = udar, čikago; Simbol = simbol; Tahoma = tahoma, arial, helvetica, sans-serif; Terminal = terminal, monako; Times New Roman = krat novi roman, časi; Trebuchet MS = trebuchet ms, geneva; Verdana = verdana, geneva; Webdings = webdings; Wingdings = krilo, zapf dingbats ';
vrni $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_google_fonts_array');

Opazite, kako sem na zgornjo kodo dodal “Lato”? To je tako preprosto! V moji temi Total WordPress dejansko pregledujem katero koli pisavo po meri, ki se uporablja na spletnem mestu, kot je določeno na tematski plošči, in jih dodam v izbirno polje, tako da so na voljo tudi med urejanjem vaših objav / strani (sladko). Toda Koda SAMO oglasi družino pisav v spustnem meniju, ne bo čarobno naložila skript, tako da, ko spremenite besedilo v urejevalniku, dejansko vidite tisto pisavo po meri, ki je nanjo uporabljena … To je tisto, kar spodaj naredi koda!

// Dodajte Google Skripte za uporabo z urejevalnikom
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));
}
}
dodajanje ('init', 'wpex_mce_google_fonts_styles');

Omogočite spustni meni Formati (slogi) in dodaj nove sloge

Se spomnite spustnega menija »Slogi« v WP 3.8? To je bilo čisto kul! Lahko bi ga uporabili za dodajanje nekaj kul razredov, ki se bodo uporabljali v urejevalniku objav (uporabljam ga v WPExplorerju, dejansko za gumbe, barvne razpone, polja .. itd.) Na WP 3.9 lahko še vedno dodate sloge, vendar je bil v novem TinyMCE 4.0 preimenovan v “Formats”, tako da deluje nekoliko drugače. Spodaj je primer, kako omogočiti spustni meni Formati in ji dodati nekaj novih elementov.

WordPress TInyMCE Spustni meni

Omogoči spustni meni Formati

To je dejansko storjeno na enak način pred WP 3.9, vendar delim, če niste vedeli, kako to storiti.

// Dodaj MCE spustni meni Formati
if (! function_exists ('wpex_style_select')) {
funkcija wpex_style_select ($ gumbi) {
array_push ($ gumbi, 'styleselect');
vrnite $ gumbe;
}
}
add_filter ('mce_buttons', 'wpex_style_select');

Dodajte nove elemente v formate

Dodajanje novih elementov je zelo enostavno. Prosimo, upoštevajte, kako sem dodal “$ settings [” style_formats_merge “] = true;” na spodnjo kodo boste s tem zagotovili, da bodo vaše spremembe dodane v spustni meni formatov skupaj z drugimi – ne prepisujte celotne stvari (morda jo lahko uporabljajo tudi drugi vtičniki).

// Dodajte nove sloge v spustni meni TinyMCE "formati"
if (! function_exists ('wpex_styles_dropdown')) {
funkcija wpex_styles_dropdown ($ nastavitve) {

// Ustvari niz novih slogov
$ new_styles = matrika (
matrika (
'title' => __ ('Slogi po meri', 'wpex'),
'items' => matrika (
matrika (
'title' => __ ('Gumb za temo', 'wpex'),
'selector' => 'a',
'class' => 'gumb-tema'
),
matrika (
'title' => __ ('Označi', 'wpex'),
'inline' => 'razpon',
'class' => 'osvetlitev besedila',
),
),
),
);

// Spojite stare in nove sloge
$ settings ['style_formats_merge'] = res;

// Dodaj nove sloge
$ settings ['style_formats'] = json_encode ($ new_styles);

// Vrni nove nastavitve
vrne $ nastavitve;

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

Dodajanje preprostega gumba MCE

Dodajanje novega gumba v urejevalnik TinyMCE je še posebej koristno za kratke kode, saj vam kot uporabniku ni treba zapomniti nobenih kratkih kod, lahko preprosto kliknete gumb in ga vstavite. Ne pravim, da v TinyMCE dodate 100 gumbov za vse vaše kratke kode (sovražim, ko to počnejo razvijalci, to je tako slaba praksa in je grozno), ampak če dodate 1 ali nekaj, bom to pustil mimo. želite dodati sveženj, potem ustvarite podmeni, kot je razloženo v razdelku, ki sledi.

Nov gumb WordPress MCE

PHP Code – Označite nov vtičnik MCE v WP

Ta koda bo razglasila vaš nov vtičnik MCE. Ne pozabite spremeniti lokacije datoteke javascript “mce-button.js”, da se bo ujemala z lokacijo datoteke (za kar vam bom dal tudi kodo v naslednjem pododdelku). kot očitno prefiks preimenujete v mojega v nekaj bolj edinstvenega!

// Priključi vaše funkcije v ustrezne filtre
funkcija my_add_mce_button () {
// preverite uporabniška dovoljenja
if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
vrnitev;
}
// preverite, ali je WYSIWYG omogočen
if ('true' == get_user_option ('rich_editing')) {
add_filter ('mce_external_plugins', 'my_add_tinymce_plugin');
add_filter ('mce_buttons', 'my_register_mce_button');
}
}
dodajanje ('admin_head', 'my_add_mce_button');

// Označi skript za nov gumb
funkcija my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js';
vrni $ plugin_array;
}

// Registrirajte nov gumb v urejevalniku
funkcija my_register_mce_button ($ gumbi) {
array_push ($ gumbi, 'my_mce_button');
vrnite $ gumbe;
}

Koda JS – Dodajte gumb MCE

Ta js koda se nahaja v datoteki js, registrirani v zgornjem delčku, v funkciji „symple_shortcodes_add_tinymce_plugin“. Temu bi morali dodati dodaten gumb z besedilom, ki v urejevalniku piše “Novo tipko” in ob kliku bo vstavil besedilo “WPExplorer.com je super!” (seveda).

(funkcija () {
tinymce.PluginManager.add ('my_mce_button', funkcija (urejevalnik, URL) {
editor.addButton ('my_mce_button', {
besedilo: 'Novo tipko',
ikona: false,
onclick: function () {
editor.insertContent ('WPExplorer.com je super!');
}
});
});
}) ();

Dodajte ikono po meri v novo tipko MCE

Zgoraj sem vam pokazal, kako lahko v urejevalniku dodate nov gumb, ki bo v urejevalniku prikazan kot »Novo tipko«, to je nekoliko hromi … Torej spremenjena koda vam bo pokazala, kako dodati svojo ikono po meri.

V CSS naložite tabelo sloga

S to funkcijo naložite novo tabelo slogov za uporabo na skrbniški plošči – nekateri vtičniki / teme morda že dodajajo tabelo sloga, tako da če vaša tema / vtičnik to preskoči in dodajte svoj CSS po meri in nastavite js (prikazano spodaj).

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

Vaš CSS po meri

To je CSS za dodajanje predhodno naložene tabele slogov.

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

Tweak vaš Javascript

Zdaj preprosto nastavite javascript, ki ste ga predhodno dodali, da odstranite besedilni parameter in namesto da ikono nastavite na false, ji dodajte ime razreda po meri.

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

Dodajanje gumba s podmenijem

Podmeni na gumbu MCE

Prej sem omenil, da je dodajanje tone novih ikon v vrstico TinyMCE slaba ideja (in je), zato si oglejte spodnjo kodo in si oglejte, kako lahko uredite javascript, da prikaže podmeni za gumb po meri. Če ga želite videti v akciji, preverite mojega Simpt Kratke kode Video.

(funkcija () {
tinymce.PluginManager.add ('my_mce_button', funkcija (urejevalnik, URL) {
editor.addButton ('my_mce_button', {
besedilo: "Vzorčni spust",
ikona: false,
vrsta: 'menubutton',
meni: [
{
besedilo: „Postavka 1“,
meni: [
{
besedilo: „Podpostavka 1“,
onclick: function () {
editor.insertContent ('WPExplorer.com je super!');
}
},
{
besedilo: „Podpostavka 2“,
onclick: function () {
editor.insertContent ('WPExplorer.com je super!');
}
}
]
},
{
besedilo: „Postavka 2“,
meni: [
{
besedilo: „Podpostavka 1“,
onclick: function () {
editor.insertContent ('WPExplorer.com je super!');
}
},
{
besedilo: „Podpostavka 2“,
onclick: function () {
editor.insertContent ('WPExplorer.com je super!');
}
}
]
}
]
});
});
}) ();

Dodajanje pojavnega okna v gumb na klik

V zgornjem primeru boste morda opazili, da vsak gumb preprosto vstavi besedilo “WPExplorer.com je super!” kar je kul, kaj pa ustvarjanje pojavnega okna, v katerem lahko uporabnik spremeni, kaj je vstavljeno v besedilo? To bi bilo sladko! In nekaj, kar sem dodal k različici 1.6 svojih kratkih kod Sympt, zato je vtičnik veliko bolj prijazen do uporabnika.

Pojavno okno za WordPress MCE

(funkcija () {
tinymce.PluginManager.add ('my_mce_button', funkcija (urejevalnik, URL) {
editor.addButton ('my_mce_button', {
besedilo: "Vzorčni spust",
ikona: false,
vrsta: 'menubutton',
meni: [
{
besedilo: „Postavka 1“,
meni: [
{
besedilo: 'Pojavno okno',
onclick: function () {
editor.windowManager.open ({
naslov: „Vstavi naključno kratko kodo“,
telo: [
{
tip: 'textbox',
ime: 'textboxName',
oznaka: „Besedilno polje“,
vrednost: '30'
},
{
tip: 'textbox',
ime: 'multilineName',
nalepka: "Več vrstica",
vrednost: "Tukaj lahko rečeš veliko stvari",
multiline: res,
minWidth: 300,
min Višina: 100
},
{
vrsta: "seznam",
ime: 'listboxName',
nalepka: "Seznam",
'vrednote': [
{text: 'Možnost 1', vrednost: '1'},
{text: 'Možnost 2', vrednost: '2'},
{text: 'Možnost 3', vrednost: '3'}
]
}
],
oddaj: funkcija (e) {
editor.insertContent ('[random_shortcode textbox = "' + e.data.textboxName + '" multiline = "' + e.data.multilineName + '" list box = "' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
}) ();

To je kul … Kaj zdaj?

Dobro vprašanje! Zdaj je čas, da vzamete te čudovite poteze in ustvarite nekaj epskega ali posodobite svoje vtičnike / teme, da bodo združljivi z novim TinyMCE v WordPressu 3.9. Sporočite mi, na kaj izhajate v spodnjih komentarjih!

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