WordPress 3.9+ TinyMCE 4 klip: Bætið stílum, hnöppum, leturgerðum, fellivalmyndum og sprettigluggum

Ein af uppáhalds uppfærslunum mínum í WordPress 3.9 var að búa til TinyMCE útgáfu 4.0 kjarna. Nýja TinyMCE lítur út fyrir að vera hreinni (passar virkilega við WP mælaborðið) og það er með virkilega fallegri viðbótarvirkni. Það þurfti að uppfæra mikið af gömlu þemunum og viðbótunum til að vinna með nýja TinyMCE svo ég eyddi tíma í að grafa í gegnum API og reikna út nokkur flott efni. Hér að neðan skal ég gefa þér nokkur dæmi um hvernig þú getur aukið virkni TinyMCE. Ég ætla ekki að fara með þig í gegnum öll skrefin eða hvað kóðinn þýðir nákvæmlega (þetta er ætlað verktaki) en mun veita þér nákvæma kóða sem þú getur afritað / límt í þemað þitt eða viðbót og síðan fínstillt í samræmi við það.


Bæti leturstærð og leturfjölskyldu velur

Sjálfgefið er að sérsniðnum letri og leturstærðum er ekki bætt við í TinyMCE ritlinum. Aðgerðin hér að neðan bætir báðum þessum fellivalum lengst til vinstri í ritlinum í annarri röðinni. Breyttu einfaldlega þar sem stendur „mce_buttons_2“ ef þú vilt hafa það í annarri röð (td: notaðu „mce_buttons_3“ fyrir 3. röðina).

// Virkja leturstærð og leturgerð velur í ritlinum
ef (! function_exists ('wpex_mce_buttons')) {
virka wpex_mce_hnappar ($ hnappar) {
array_unshift ($ hnappar, 'leturval'); // Bæta við letri Veldu
array_unshift ($ hnappar, 'leturval'); // Bæta við leturstærð Veldu
skila $ hnappum;
}
}
add_filter ('mce_buttons_2', 'wpex_mce_buttons');

Bætir við sérsniðnum leturstærðum

Sjálfgefið er að leturstærðir séu stilltar á pt gildi sem eru ekki alltaf tilvalin. Ég vil frekar nota pixelgildi (12px, 13px, 14px, 16px..etc) og til að bjóða upp á fleiri möguleika fyrir sveigjanleika í grater. Aðgerðin hér að neðan mun breyta sjálfgefnum valkostum leturstærðar í fellivalmyndinni.

// Sérsníða leturstærðir mce ritstjóra
ef (! function_exists ('wpex_mce_text_sizes')) {
fall wpex_mce_text_sizes ($ initArray) {
$ initArray ['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
skila $ initArray;
}
}
add_filter ('pínulítill_mce_before_init', 'wpex_mce_text_stærðir');

Bætir við sérsniðnum leturgerðum

Sjálfgefna leturvalkostirnir í leturfjölskylduvalinu eru allir „netöryggir“ leturgerðir sjálfgefið, en hvað ef þú vilt bæta fleiri letri við valinn? Kannski einhver Google letur? Það er mjög auðvelt að skoða dæmið hér að neðan.

// Bættu við sérsniðnum leturgerðum á leturgerðarlista
ef (! function_exists ('wpex_mce_google_fonts_array')) {
fall 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; Book Antiqua = book antiqua, palatino; Comic Sans MS = grínisti sans ms, sans-serif; Courier New = hraðboði nýr, hraðboði; Georgía = Georgía, palatínó; Helvetica = helvetica; Áhrif = högg, chicago; Tákn = tákn; 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 ';
skila $ initArray;
}
}
add_filter ('pínulítill_mce_before_init', 'wpex_mce_google_fonts_array');

Taktu eftir því hvernig ég bætti „Lato“ við listann í kóðanum hér að ofan? Það er svo einfalt! Í Total WordPress þema mínu fer ég í gegnum hvaða sérsniðna letur sem er notaður á vefnum eins og hann er skilgreindur í þemaplötunni og bætir þeim við valkassann svo þær séu einnig fáanlegar meðan þú breytir innlegginu / síðunum þínum (sæt). En kóðinn auglýsir BARA leturfjölskylduna í fellivalmyndina en það hleðst ekki handritið töfrandi þannig að þegar þú breytir texta í ritlinum geturðu í raun séð það sérsniðna letur sem notað er á það … Það er það sem kóðinn hér að neðan gerir!

// Bættu við Google forskriftum til notkunar með ritlinum
ef (! function_exists ('wpex_mce_google_fonts_style')) {
fall wpex_mce_google_fonts_style () {
$ 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_style');

Kveiktu á sniðmát (stíl) fellivalmyndinni og bættu við nýjum stíl

Manstu eftir fellivalmyndinni „Styles“ í WP 3.8? Þetta var frekar flott! Þú gætir notað það til að bæta við nokkrum flottum flokkum til að nota í ritstjóranum (ég nota það á WPExplorer í raun fyrir hnappa, litaða spennu, kassa..etc). Við erum í WP 3.9 og þú getur samt bætt við stíl, en það hefur verið breytt í nýja TinyMCE 4.0 í „Formats“ svo það virkar aðeins öðruvísi. Hér að neðan er dæmi um hvernig á að virkja sniðmát fellivalmyndina og bæta einnig nokkrum nýjum hlutum við það.

Dropdown valmynd fyrir WordPress TInyMCE snið

Kveiktu á fellivalmyndinni fyrir snið

Þetta er í raun gert á sama hátt áður en WP 3.9 en ég deili ef þú vissir ekki hvernig á að gera það.

// Bættu við fellivalmynd fyrir snið við MCE
ef (! function_exists ('wpex_style_select')) {
fall wpex_style_select ($ hnappar) {
array_push ($ hnappar, 'stílsval');
skila $ hnappum;
}
}
add_filter ('mce_buttons', 'wpex_style_select');

Bættu nýjum hlutum við snið

Það er mjög auðvelt að bæta við nýjum hlutum. Vinsamlegast merktu hvernig ég hef bætt við „$ stillingum [‘ style_formats_merge ’] = true;“ að kóðanum hér að neðan, þetta tryggir að breytingum þínum er bætt við fellivalmyndina snið ásamt öðrum – ekki skrifa yfir allt (kannski vill önnur viðbætur nota það líka).

// Bættu nýjum stíl við fellivalmynd TinyMCE "snið"
ef (! function_exists ('wpex_style_dropdown')) {
fall wpex_style_dropdown ($ stillingar) {

// Búðu til fjölda nýrra stíla
$ new_style = fylki (
fylki (
'title' => __ ('Sérsniðin stíl', 'wpex'),
'hlutir' => fylki (
fylki (
'title' => __ ('Þemahnappur', 'wpex'),
'selector' => 'a',
'flokkar' => 'þemahnappur'
),
fylki (
'title' => __ ('Highlight', 'wpex'),
'inline' => 'span',
'flokkar' => 'text-hápunktur',
),
),
),
);

// Sameina gamla og nýja stíl
$ stillingar ['style_formats_merge'] = satt;

// Bættu við nýjum stíl
$ stillingar ['style_formats'] = json_encode ($ new_style);

// Til baka nýjar stillingar
skila $ stillingum;

}
}
add_filter ('pínulítill_mce_before_init', 'wpex_style_dropdown');

Að bæta við einfaldan MCE hnapp

Að bæta nýjum takka við TinyMCE ritstjórann er sérstaklega gagnlegt fyrir stutta kóða, því sem notandi þarftu ekki að muna neina styttu kóða geturðu einfaldlega smellt á hnapp og það settir inn. Ég er ekki að segja að bæta 100 af hnöppum við TinyMCE fyrir alla þína stutta kóða (ég hata þegar verktaki gerir þetta, það er svo slæmt starf og lítur hræðilegt út) en ef þú bætir við 1 eða nokkrum mun ég láta það líða �� Ef þú viltu bæta við hellingum, þá ættirðu að búa til undirvalmynd eins og útskýrt er í hlutanum sem á eftir kemur.

WordPress MCE nýr hnappur

PHP kóða – Tilkynntu nýja MCE viðbótina í WP

Þessi kóði lýsir því yfir að nýja MCE viðbótin þín sé viss um að breyta staðsetningu javascript skráarinnar “mce-button.js” til að passa við staðsetningu skjalsins (sem ég mun gefa þér kóðann fyrir líka í næsta undirkafla) eins og augljóslega endurnefna forskeytið „mitt“ í eitthvað meira einstakt!

// Krókar aðgerðir þínar í réttar síur
virka my_add_mce_button () {
// athuga heimildir notenda
ef (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
snúa aftur;
}
// athugaðu hvort WYSIWYG er virkt
if ('satt' == 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');

// Lýsið handriti fyrir nýjan hnapp
virka my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js';
skila $ plugin_array;
}

// Skráðu nýjan hnapp í ritilinn
virka my_register_mce_button ($ hnappar) {
array_push ($ hnappar, 'my_mce_button');
skila $ hnappum;
}

JS kóða – Bættu hnappinum við MCE

Þessi js kóða fer í js skrána sem er skráð í snitið hér að ofan í „symple_shortcodes_add_tinymce_plugin“ aðgerðinni. Þetta ætti að bæta við nýjum textahnappi sem segir „Nýr hnappur“ í ritilinn þinn og þegar smellt er á hann komi textinn „WPExplorer.com er æðislegur!“ (auðvitað).

(fall () {
tinymce.PluginManager.add ('my_mce_button', fall (ritstjóri, url) {
editor.addButton ('my_mce_button', {
texti: 'Nýr hnappur',
icon: ósatt,
onclick: fall () {
editor.insertContent ('WPExplorer.com er æðislegt!');
}
});
});
}) ();

Bættu sérsniðnu tákni við nýjan MCE hnappinn

Hér að ofan sýndi ég þér hvernig á að bæta við nýjum hnappi sem birtist sem „Nýr hnappur“ í ritlinum, þetta er svolítið halt… Svo að breytti kóðinn sýnir þér hvernig á að bæta við þínu eigin sérsniðna tákni.

Hlaðið sniðmát með CSS

Notaðu þessa aðgerð til að hlaða nýja sniðmát til notkunar í stjórnborðinu þínu – sum viðbót / þemu eru nú þegar að bæta við stílblaði þannig að ef þemað / viðbótin er að gera þá slepptu þessu og bættu bara við sérsniðnu CSS og fínstilltu js (sjá hér að neðan).

virka 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');

Sérsniðna CSS þinn

Þetta er CSS til að bæta við sniðmát sem áður hefur verið hlaðinn.

i.my-mce-icon {
bakgrunnsmynd: url ('ÞINN ICON URL “);
}

Láttu Javascript þitt

Nú er einfalt að fínstilla JavaScript sem þú bætir við áður til að fjarlægja textabreytuna og í stað þess að stilla táknið á rangt gefðu það sérsniðið bekkjarheiti.

(fall () {
tinymce.PluginManager.add ('my_mce_button', fall (ritstjóri, url) {
editor.addButton ('my_mce_button', {
icon: 'my-mce-icon',
onclick: fall () {
editor.insertContent ('WPExplorer.com er æðislegt!');
}
});
});
}) ();

Bæta við hnappi með undirvalmynd

Undirvalmynd MCE hnapps

Fyrr nefndi ég að það er slæm hugmynd að bæta við tonni af nýjum táknum á TinyMCE barinn (og það er það) svo kíktu á kóðann hér að neðan til að sjá hvernig þú getur breytt JavaScript til að birta undirvalmynd fyrir sérsniðna hnappinn. Ef þú vilt sjá það í aðgerð skoðaðu mitt Einföld stuttkóðamyndband.

(fall () {
tinymce.PluginManager.add ('my_mce_button', fall (ritstjóri, url) {
editor.addButton ('my_mce_button', {
texti: 'Sýnishorn dropdown',
icon: ósatt,
gerð: 'menubutton',
matseðill: [
{
texti: '1. liður',
matseðill: [
{
texti: 'Undirliður 1',
onclick: fall () {
editor.insertContent ('WPExplorer.com er æðislegt!');
}
},
{
texti: 'Undirliður 2',
onclick: fall () {
editor.insertContent ('WPExplorer.com er æðislegt!');
}
}
]
},
{
texti: '2. liður',
matseðill: [
{
texti: 'Undirliður 1',
onclick: fall () {
editor.insertContent ('WPExplorer.com er æðislegt!');
}
},
{
texti: 'Undirliður 2',
onclick: fall () {
editor.insertContent ('WPExplorer.com er æðislegt!');
}
}
]
}
]
});
});
}) ();

Bætir pop-up glugga við hnappinn þinn á Smelltu

Í dæminu hér að ofan gætir þú tekið eftir því að sérhver hnappur setur einfaldlega inn textann „WPExplorer.com er æðislegur!“ sem er flott, en hvað með að búa til sprettiglugga þar sem notandi getur breytt því sem er sett inn í textann? Nú væri það ljúft! Og það er eitthvað sem ég hef bætt við útgáfu 1.6 af Symple Shortcodes mínum sem gerir viðbótina mun notendavænni.

WordPress MCE sprettiglugga

(fall () {
tinymce.PluginManager.add ('my_mce_button', fall (ritstjóri, url) {
editor.addButton ('my_mce_button', {
texti: 'Sýnishorn dropdown',
icon: ósatt,
gerð: 'menubutton',
matseðill: [
{
texti: '1. liður',
matseðill: [
{
texti: 'Pop-Up',
onclick: fall () {
ritstjóri.windowManager.open ({
titill: 'Setja inn tilviljanakenndan kóða',
líkami: [
{
tegund: 'textbox',
nafn: 'textboxName',
merki: 'Textakassi',
gildi: '30'
},
{
tegund: 'textbox',
nafn: 'multilineName',
merkimiða: 'Marglaga textakassi',
gildi: 'Þú getur sagt mikið af hlutum hérna inn',
multiline: satt,
mínBreidd: 300,
mín. hæð: 100
},
{
tegund: 'listbox',
nafn: 'listboxName',
merki: 'Listakassi',
'gildi': [
{texti: 'Valkostur 1', gildi: '1'},
{texti: 'Valkostur 2', gildi: '2'},
{texti: 'Valkostur 3', gildi: '3'}
]
}
],
onsubmit: fall (e) {
editor.insertContent ('[random_shortcode textbox = "' + e.data.textboxName + '" multiline = "' + e.data.multilineName + '" listbox = "' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
}) ();

Þetta er flott… Nú hvað?

Góð spurning! Nú er kominn tími fyrir þig að taka þessar frábæru klip og fara að búa til eitthvað epískt eða uppfæra viðbætur / þemu til að samrýmast nýju TinyMCE í WordPress 3.9. Láttu mig vita hvað þú kemur með í athugasemdunum hér að neðan!

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