WordPress 3.9+ TinyMCE 4 näpunäited: stiilide, nuppude, fontide, rippmenüüde ja hüpikute lisamine

Üks minu lemmikvärskendusi WordPress 3.9-s oli TinyMCE versiooni 4.0 tuuma tegemine. Uus TinyMCE näeb välja puhtam (vastab tõesti WP armatuurlauale) ja sellel on tõeliselt kena lisatud funktsionaalsus. Uue TinyMCE-ga töötamiseks tuli palju minu vanu teemasid ja pistikprogramme värskendada, nii et veetsin mõnda aega API ja mõeldes välja mõned lahedad asjad. Allpool toon teile mõned näited, kuidas saate TinyMCE funktsioone laiendada. Ma ei hakka teid kõiki samme läbi lugema ega seda, mida kood täpselt tähendab (see on mõeldud arendajatele), kuid annan teile täpse koodi, mille saate oma teemasse või pistikprogrammi kopeerida / kleepida ja seejärel vastavalt näpistada..


Fondi suuruse ja fondipere lisamine valib

Vaikimisi ei lisata kohandatud fonte ja kirjasuurusi TinyMCE redaktorisse. Allolev funktsioon lisab mõlemad need rippmenüüd redaktori vasakusse vasakusse serva teises reas. Kui soovite, et see oleks teises reas, muutke lihtsalt kohta, kus öeldakse „mce_buttons_2” (nt 3. rea jaoks kasutage „mce_buttons_3”).

// Luba kirjasuurus ja fondipere valib redaktoris
if (! funktsioon_eksisteerib ('wpex_mce_buttons'))) {
funktsioon wpex_mce_buttons ($ nupud) {
array_unshift ($ nupud, 'fontselect'); // Font Select lisamine
array_unshift ($ nupud, 'fontsizeselect'); // Lisage fondi suurus
tagastamisnupud;
}
}
add_filter ('mce_buttons_2', 'wpex_mce_buttons');

Kohandatud fondi suuruste lisamine

Vaikimisi on fondi suurused seatud pt väärtustele, mis pole alati ideaalsed. Eelistan kasutada piksliväärtusi (12 pikslit, 13 pikslit, 14 pikslit, 16 pikslit jne) ja pakkuda riivipainduvuse jaoks rohkem võimalusi. Allolev funktsioon muudab rippmenüüst valitud vaikesuuruse sätteid.

// Mce-redaktori fondi suuruste kohandamine
if (! funktsioon eksisteerib ('wpex_mce_text_sizes'))) {
funktsioon wpex_mce_text_sizes ($ initArray) {
$ initArray ['fontsize_formats'] = "9 pikslit 10 pikslit 12 pikslit 13 pikslit 14 pikslit 16 pikslit 18 pikslit 21 pikslit 24 pikslit 28 pikslit 32 pikslit 36 ​​pikslit";
tagasi $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_text_sizes');

Kohandatud fondide lisamine

Fondiperekonna valija vaikimisi kasutatavad fontvalikud on vaikimisi kõik veebiturvalised fondid, kuid mis oleks, kui soovite valijasse rohkem fonte lisada? Võib-olla mõni Google Fonts? Allpool toodud näite vaatamine on tõesti lihtne.

// Lisage kohandatud fondid fontide loendisse
if (! function_existing ('wpex_mce_google_fonts_array'))) {
funktsioon wpex_mce_google_fonts_array ($ initArray) {
$ initArray ['font_formats'] = 'Lato = Lato; Andale Mono = Andaan mono, korda; Arial = arial, helvetica, sans-serif; Arial Black = arial must, avantarde; Book Antiqua = book antiqua, palatino; Comic Sans MS = koomiks sans ms, sans-serif; kuller uus = uus kuller, kuller; Gruusia = Gruusia, palatino; Helvetica = helvetica; Mõju = löök, chicago; Sümbol = sümbol; Tahoma = tahoma, arial, helvetica, sans-serif; Terminal = terminal, monaco; Times New Roman = korda uus rooma, korda; Trebuchet MS = trebuchet ms, geenivarad; Verdana = verdana, geen; Webding = webdings; Wingingings = winging, zapf dingbats ';
tagasi $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_google_fonts_array');

Pange tähele, kuidas ma lisasin ülaltoodud koodi loendisse sõna “Lato”? See on nii lihtne! Teema WordPress kogu teemas läbin tegelikult kõik saidil kasutatavad kohandatud fondid, nagu on määratletud teemapaneelil, ja lisan need valikukasti, nii et need oleksid saadaval ka teie postituste / lehtede redigeerimise ajal (armas). Kuid kood reklaamib AINULT rippmenüüsse fondiperekonda, see ei laadita skripti võluväel, nii et redigeerijas teksti muutmisel näete tegelikult selle kohandatud fonti … Seda teeb allpool olev kood.!

// Lisage redaktoriga kasutamiseks Google Scripts
if (! function_exists ('wpex_mce_google_fonts_styles'))) {
funktsioon 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');

Lubage rippmenüü Vormingud (stiilid) ja lisage uued stiilid

Kas mäletate WP 3.8 rippmenüüd „Stiilid”? See oli päris lahe! Võite kasutada seda mõne laheda klassi lisamiseks, mida postitusredaktoris kasutada (ma kasutan seda WPExploreris tegelikult nuppude, värviliste servade, kastide..etc jaoks). WP 3.9-s saate stiile siiski lisada, kuid uues TinyMCE 4.0 on see ümber nimetatud formaadiks “Formats”, nii et see töötab natuke teistsugusel viisil. Allpool on toodud näide rippmenüü Vormingud lubamisest ja sellele ka mõne uue üksuse lisamisest.

WordPress TInyMCE vormindab rippmenüü

Luba rippmenüü Vormingud

Seda tehakse samal viisil enne WP 3.9, kuid ma jagan juhtumit, et te ei teadnud, kuidas seda teha.

// Lisa rippmenüü Vormingud MCE-le
if (! function_existing ('wpex_style_select'))) {
funktsioon wpex_style_select ($ nupud) {
array_push ($ nupud, 'styleselect');
tagastamisnupud;
}
}
add_filter ('mce_buttons', 'wpex_style_select');

Lisage vormingutesse uusi üksusi

Uute üksuste lisamine on ülilihtne. Pange tähele, kuidas olen lisanud “$ settings [‘style_formats_merge’] = true;” allolevale koodile, see tagab, et teie muudatused lisatakse rippmenüüsse vormingusse koos kõigi teistega – ärge kirjutage kogu asja üle kirjutades (võib-olla tahavad seda kasutada ka teised pistikprogrammid).

// Lisage uued stiilid menüü TinyMCE "vormingud" rippmenüüsse
if (! function_exists ('wpex_styles_dropdown'))) {
funktsioon wpex_styles_dropdown ($ seaded) {

// Uute stiilide massiivi loomine
$ new_styles = array (
massiiv (
'pealkiri' => __ ('kohandatud stiilid', 'wpex'),
'üksused' => massiiv (
massiiv (
'pealkiri' => __ ('teema nupp', 'wpex'),
'valija' => 'a',
'class' => 'teema nupp'
),
massiiv (
'pealkiri' => __ ('Esiletõstmine', 'wpex'),
'inline' => 'span',
'klassid' => 'teksti esiletõstmine',
),
),
),
);

// Ühendage vanad ja uued stiilid
$ settings ['style_formats_merge'] = õige;

// Lisage uusi stiile
$ settings ['style_formats'] = json_encode ($ new_styles);

// Tagastage uued seaded
tagasta $ seaded;

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

Lihtsa MCE-nupu lisamine

Uue nupu lisamine TinyMCE redigeerijasse on eriti kasulik lühikoodide jaoks, kuna kasutajana ei pea te lühinumbreid meeles pidama, klõpsates lihtsalt nuppu ja see lisab selle. Ma ei ütle, et peaksin kõigi oma lühikoodide jaoks TinyMCE-le 100 nuppu lisama (ma vihkan seda, kui arendajad seda teevad, see on nii halb tava ja tundub õudne), aga kui lisate ühe või mitu, siis lasin selle mööda minna �� Kui te kui soovite hunniku lisada, peaksite looma alammenüü, nagu on selgitatud järgnevas jaotises.

WordPress MCE uus nupp

PHP kood – kuulutage WP-s uus MCE pistikprogramm

See kood kuulutab teie uue MCE pistikprogrammi. Muutke kindlasti ka javascripti faili “mce-button.js” asukoht, et see vastaks teie faili asukohale (mille ma teile järgmises alajaotuses ka koodiks annan). nimetage eesliide “minu” ilmselgelt ümber millekski ainulaadsemaks!

// Koondab teie funktsioonid õigetesse filtritesse
funktsioon my_add_mce_button () {
// kontrolli kasutaja õigusi
if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
tagasi;
}
// kontrollige, kas WYSIWYG on lubatud
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');

// Uue nupu skripti deklareerimine
funktsioon my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js';
return $ plugin_array;
}

// Registreeri uus nupp redaktoris
funktsioon my_register_mce_button ($ nupud) {
array_push ($ nupud, 'my_mce_button');
tagastamisnupud;
}

JS-kood – lisage nupp MCE-le

See js-kood asub ülaltoodud jaotises registreeritud funktsioonis js-failis funktsioonis “symple_shortcodes_add_tinymce_plugin”. See peaks lisama teie redaktorisse uue tekstinupu, mille pealkiri on “New Button”, ja klõpsamisel lisab see teksti “WPExplorer.com on fantastiline!” (muidugi).

(funktsioon () {
tinymce.PluginManager.add ('my_mce_button', funktsioon (toimetaja, URL) {
editor.addButton ('my_mce_button', {
tekst: 'uus nupp',
ikoon: vale,
onclick: function () {
editor.insertContent ('WPExplorer.com on fantastiline!');
}
});
});
}) ();

Lisage kohandatud ikoon oma uuele MCE nupule

Ülalpool näitasin teile, kuidas lisada uut nuppu, mis kuvatakse redaktoris kui “uus nupp”, see on natuke hale … Nii et muudetud kood näitab teile, kuidas lisada oma kohandatud ikooni.

Laadige CSS-iga laadileht

Kasutage seda funktsiooni uue laadilehe laadimiseks, et saaksite seda oma halduspaneelil kasutada – mõned pistikprogrammid / teemad võivad juba laadilehte lisada, nii et kui teie teema / pistikprogramm seda teeb, siis jätke see vahele ja lisage lihtsalt oma kohandatud CSS ning näputage neid (vaata allpool)..

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

Teie kohandatud CSS

See on CSS, et lisada varem laaditud stiilileht.

i.my-mce-icon {
taustpilt: url ('YOUR ICON URL');
}

Näpistage oma Javascripti

Nippige näpunäidet, mille olete varem lisanud, et eemaldada tekstiparameeter ja selle asemel, et ikooni valeks seada, andke sellele kohandatud klassinimi.

(funktsioon () {
tinymce.PluginManager.add ('my_mce_button', funktsioon (toimetaja, URL) {
editor.addButton ('my_mce_button', {
ikoon: 'minu-mce-ikoon',
onclick: function () {
editor.insertContent ('WPExplorer.com on fantastiline!');
}
});
});
}) ();

Nupu lisamine alammenüüga

MCE nupu alammenüü

Varem mainisin, et TinyMCE ribale tonni uute ikoonide lisamine on halb mõte (ja see on ka see), nii et vaadake allolevat koodi, et näha, kuidas saate muuta javascripti, et kuvada oma kohandatud nupu alammenüü. Kui soovite seda tegevuses näha, vaadake minu Symple Shortcodes Video.

(funktsioon () {
tinymce.PluginManager.add ('my_mce_button', funktsioon (toimetaja, URL) {
editor.addButton ('my_mce_button', {
tekst: 'Rippmenüü näidis',
ikoon: vale,
tüüp: 'menubutton',
menüü: [
{
tekst: „Punkt 1”,
menüü: [
{
tekst: „alamüksus 1”,
onclick: function () {
editor.insertContent ('WPExplorer.com on fantastiline!');
}
},
{
tekst: 'alampunkt 2',
onclick: function () {
editor.insertContent ('WPExplorer.com on fantastiline!');
}
}
]
},
{
tekst: „Punkt 2”,
menüü: [
{
tekst: „alamüksus 1”,
onclick: function () {
editor.insertContent ('WPExplorer.com on fantastiline!');
}
},
{
tekst: 'alampunkt 2',
onclick: function () {
editor.insertContent ('WPExplorer.com on fantastiline!');
}
}
]
}
]
});
});
}) ();

Hüpikakna lisamine nupule Klõpsamine

Ülaltoodud näites võite märgata, et iga nupp lisab lihtsalt teksti “WPExplorer.com on fantastiline!” mis on lahe, aga kuidas oleks luua hüpikaken, kus kasutaja saab muuta seda, mida teksti sisestatakse? Nüüd oleks see magus! Ja see on midagi, mille olen lisanud oma Symple Shortcode’i versioonile 1.6, muutes pistikprogrammi palju kasutajasõbralikumaks.

WordPress MCE hüpikaken

(funktsioon () {
tinymce.PluginManager.add ('my_mce_button', funktsioon (toimetaja, URL) {
editor.addButton ('my_mce_button', {
tekst: 'Rippmenüü näidis',
ikoon: vale,
tüüp: 'menubutton',
menüü: [
{
tekst: „Punkt 1”,
menüü: [
{
tekst: 'hüpikaken',
onclick: function () {
editor.windowManager.open ({
pealkiri: 'Juhusliku lühikoodi sisestamine',
keha: [
{
tüüp: 'textbox',
nimi: 'textboxName',
silt: 'tekstikast',
väärtus: '30'
},
{
tüüp: 'textbox',
nimi: 'multilineName',
silt: 'mitmerealine tekstikast',
väärtus: 'Siin võib öelda palju asju',
mitmerealine: tõsi,
minLaius: 300,
minKõrgus: 100
},
{
tüüp: 'listbox',
nimi: 'listboxName',
silt: 'loendikast',
'väärtused': [
{tekst: '1. võimalus', väärtus: '1'},
{tekst: '2. võimalus', väärtus: '2'},
{tekst: '3. võimalus', väärtus: '3'}
]
}
],
onsubmit: funktsioon (e) {
editor.insertContent ('[random_shortcode textbox = "' + e.data.textboxName + '" multiline = "' + e.data.multilineName + '" listbox = "' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
}) ();

See on lahe … mis nüüd?

Hea küsimus! Nüüd on aeg teil võtta need vingeid näpunäiteid ja luua midagi eepilist või värskendada pistikprogramme / teemasid, et need ühilduksid WordPress 3.9 uue TinyMCE-ga. Andke mulle allolevates kommentaarides teada, millega te välja tulete!

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