WordPress 3.9+ TinyMCE 4 -sovellukset: tyylien, painikkeiden, fonttien, avattavien ja ponnahdusikkunoiden lisääminen

Yksi WordPress 3.9: n suosikkipäivityksistäni oli TinyMCE-version 4.0 ytimen tekeminen. Uusi TinyMCE näyttää puhtaammalta (vastaa todella WP-kojetaulua) ja siinä on todella hienoja lisäominaisuuksia. Paljon vanhoja teemani ja laajennukseni oli päivitettävä toimimaan uuden TinyMCE: n kanssa, joten vietin jonkin aikaa kaivaakseni sovellusliittymä ja keksimässä hienoja juttuja. Alla annan sinulle joitain esimerkkejä siitä, kuinka voit laajentaa TinyMCE: n toimintoja. En aio käydä läpi kaikkia vaiheita tai sitä, mitä koodi tarkoittaa tarkalleen (tämä on tarkoitettu kehittäjille), mutta annan sinulle tarkan koodin, jonka voit kopioida / liittää teemaasi tai laajennukseen ja muokata sitä vastaavasti.


Fonttikoon ja fonttiperheen lisääminen valitsee

Oletuksena mukautettuja fontteja ja kirjasinkokoja ei lisätä TinyMCE-editoriin. Alla oleva toiminto lisää molemmat näistä pudotusvalikoista toisen rivin editorin vasempaan vasempaan osaan. Vaihda vain kohta, jossa lukee “mce_buttons_2”, jos haluat sen toisella rivillä (esim. Käytä “mce_buttons_3” kolmannella rivillä).

// Ota kirjasinkoko käyttöön ja fonttiperhe valitsee editorissa
if (! funktio on olemassa ('wpex_mce_buttons')) {
toiminto wpex_mce_buttons ($ painikkeet) {
array_unshift ($ -painikkeet, 'fontselect'); // Lisää fontin valinta
array_unshift ($ -painikkeet, 'fontsizeselect'); // Lisää fonttikoko Valitse
paluu $ -painikkeet;
}
}
add_filter ('mce_buttons_2', 'wpex_mce_buttons');

Mukautettujen kirjasinkokojen lisääminen

Oletuksena fonttikoot on asetettu pt-arvoihin, jotka eivät ole aina ihanteellisia. Pidän mieluummin pikseliarvoja (12 pikseliä, 13 pikseliä, 14 pikseliä, 16 pikseliä jne.) Ja tarjoamaan enemmän vaihtoehtoja raastin joustavuudelle. Alla oleva toiminto muuttaa oletusfonttikokovaihtoehtoja pudotusvalitsimessa.

// Mukauta mce editorin kirjasinkokoja
if (! function_existing ('wpex_mce_text_sizes'))) {
funktio wpex_mce_text_sizes ($ initArray) {
$ initArray ['fontsize_formats'] = "9 pikseliä 10 pikseliä 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
palauta $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_text_sizes');

Mukautettujen kirjasinten lisääminen

Oletus fonttivaihtoehdot fonttiperheen valitsimessa ovat oletusarvoisesti kaikkia “Web-turvallisia” fontteja, mutta entä jos haluat lisätä lisää fontteja valitsimeen? Ehkä jotkut Google-fontit? Katsomme alla olevaa esimerkkiä, että on todella helppoa.

// Lisää mukautettuja fontteja Fonts-luetteloon
if (! function_existing ('wpex_mce_google_fonts_array'))) {
toiminto wpex_mce_google_fonts_array ($ initArray) {
$ initArray ['font_formats'] = 'Lato = Lato; Andale Mono = andali mono, kertaa; Arial = arial, helvetica, sans-serif; Arial Black = arial musta, avantgarde; Book Antiqua = kirjan antiikki, palatino; Comic Sans MS = sarjakuva sans ms, sans-serif; Courier New = kuriiri uusi, kuriiri; Georgia = georgia, palatino; Helvetica = helvetica; Impact = impakt, chicago; Symboli = symboli; Tahoma = tahoma, arial, helvetica, sans-serif; Terminaali = terminaali, monaco; Times New Roman = kertaa uusi roomalainen, kertaa; Trebuchet MS = trebuchet ms, geeni; Verdana = verdana, geeni; Verkkopohjat = verkkoverkot; Siipipiikit = siipipyörät, zapf-dingbatsit;
palauta $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_google_fonts_array');

Huomaa, kuinka lisäsin ”Lato” yllä olevan koodin luetteloon? Se on niin yksinkertaista! Koko WordPress-teemani läpi tosiasiallisesti käydään läpi kaikki sivustossa käytetyt mukautetut kirjasimet teemapaneelissa määritellyllä tavalla ja lisään ne valintalaatikkoon, jotta ne ovat myös saatavilla muokkaamalla viestejäsi / sivusi (suloinen). Mutta koodi mainostaa VAIN kirjasinperhettä avattavassa valikossa, se ei laadi maagisesti skriptiä, joten kun muutat tekstiä editorissa, näet itse sen mukautetun kirjasimen … Tämän tekee alla oleva koodi.!

// Lisää Google Scripts käytettäväksi editorin kanssa
if (! function_existing ('wpex_mce_google_fonts_styles'))) {
toiminto 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');

Ota käyttöön Muodot (tyylit) -valikko ja Lisää uusia tyylejä

Muistatko ”Tyylit” -pudotus WP 3.8: ssa? Se oli aika siistiä! Voit käyttää sitä lisätäksesi joitain hienoja luokkia käytettäväksi postieditorissa (käytän sitä WPExplorerissa itse asiassa painikkeisiin, värillisiin jänteisiin, laatikoihin jne.). WP 3.9: ssä voit silti lisätä tyylejä, mutta se on nimetty uudessa TinyMCE 4.0 -muodossa muotoiksi, joten se toimii vähän eri tavalla. Alla on esimerkki siitä, kuinka Avattavat muodot otetaan käyttöön ja lisätään siihen myös uusia kohteita.

WordPress TInyMCE-muodot avattava valikko

Ota käyttöön pudotusvalikko Muodot

Tämä tosiasiallisesti tehdään samalla tavalla ennen työryhmää 3.9, mutta jaan tapauksen, että et tiennyt miten se tehdään.

// Lisää pudotusvalikko muodot MCE: hen
if (! function_existing ('wpex_style_select'))) {
toiminto wpex_style_select ($ -painikkeet) {
array_push ($ -painikkeet, 'styleselect');
paluu $ -painikkeet;
}
}
add_filter ('mce_buttons', 'wpex_style_select');

Lisää uusia muotoja

Uusien esineiden lisääminen on erittäin helppoa. Huomaa, kuinka olen lisännyt ”$ settings [‘style_formats_merge’] = true;” alla olevaan koodiin, tämä varmistaa, että tekemäsi muutokset lisätään avattavassa muodossa olevaan valikkoon yhdessä muiden kanssa – älä kirjoita koko asiaa korvaamalla (ehkä myös muut laajennukset haluavat käyttää sitä).

// Lisää uusia tyylejä TinyMCE-muodot-valikon pudotusvalikkoon
if (! function_existing ('wpex_styles_dropdown'))) {
toiminto wpex_styles_dropdown ($ -asetukset) {

// Luo joukko uusia tyylejä
$ new_styles = taulukko (
array (
'title' => __ ('Mukautetut tyylit', 'wpex'),
'esineet' => taulukko (
array (
'otsikko' => __ ('teemapainike', 'wpex'),
'valitsin' => 'a',
'luokka' => 'teema-painike'
),
array (
'otsikko' => __ ('Korosta', 'wpex'),
'inline' => 'span',
'luokat' => 'tekstin korostus',
),
),
),
);

// Yhdistä vanhat ja uudet tyylit
$ settings ['style_formats_merge'] = totta;

// Lisää uusia tyylejä
$ settings ['style_formats'] = json_encode ($ new_styles);

// Palauta uudet asetukset
palauta $ asetukset;

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

Yksinkertaisen MCE-painikkeen lisääminen

Uuden painikkeen lisääminen TinyMCE-editoriin on erityisen hyödyllinen lyhytkoodeille, koska käyttäjänä sinun ei tarvitse muistaa mitään lyhytkoodeja, napsauttamalla vain painiketta ja se lisää sen. En sano lisätä 100-painikkeita TinyMCE: hen kaikille lyhytkoodeillesi (inhoan, kun kehittäjät tekevät tämän, se on niin huono käytäntö ja näyttää kauhealta), mutta jos lisäät yhden tai muutama, annan sen ohittaa pass Jos sinä Haluatko lisätä joukon, sinun tulee luoda alavalikko, kuten seuraavassa osiossa selitetään.

WordPress MCE Uusi painike

PHP-koodi – Julkaise uusi MCE-laajennus WP: ssä

Tämä koodi ilmoittaa uuden MCE-laajennuksesi. Muista myös vaihtaa javascript-tiedoston “mce-button.js” sijainti vastaamaan tiedostosi sijaintia (jonka annan sinulle myös koodin seuraavassa alajaksossa) koska nimetä etuliite ”oma” ilmeisesti uudelleen jotain ainutlaatuisempaa!

// Koukuttaa toimintosi oikeisiin suodattimiin
toiminto my_add_mce_button () {
// tarkista käyttöoikeudet
if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
palata;
}
// tarkista onko WYSIWYG käytössä
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');

// Ilmoita uuden painikkeen komentosarja
toiminto my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js';
return $ plugin_array;
}

// Rekisteröi uusi painike editorissa
toiminto my_register_mce_button ($ -painikkeet) {
array_push ($ -painikkeet, 'my_mce_button');
paluu $ -painikkeet;
}

JS-koodi – Lisää painike MCE: hen

Tämä js-koodi menee yllä olevaan katkelmaan rekisteröityyn js-tiedostoon ”symple_shortcodes_add_tinymce_plugin” -toiminnossa. Tämän pitäisi lisätä uusi tekstipainike, jossa lukee “New Button”, editoriin ja kun sitä napsautetaan, teksti “WPExplorer.com on mahtava!” (tietysti).

(toiminto () {
tinymce.PluginManager.add ('my_mce_button', toiminto (toimittaja, URL) {
editor.addButton ('my_mce_button', {
teksti: 'Uusi painike',
kuvake: väärä,
onclick: function () {
editor.insertContent ('WPExplorer.com on mahtava!');
}
});
});
}) ();

Lisää mukautettu kuvake uuteen MCE-painikkeeseen

Yllä yllä osoitin sinulle, kuinka lisätä uusi painike, joka näkyy “New Button” -editorissa, tämä on vähän lama … Joten muutettu koodi näyttää sinulle, kuinka lisätä oma mukautettu kuvake.

Lataa tyylitaulukko CSS: ään

Käytä tätä toimintoa ladataksesi uuden tyylitaulukon käytettäväksi järjestelmänvalvojan paneelissa – jotkut laajennukset / teemat saattavat jo lisätä tyylitaulukon, joten jos teema / laajennus tekee, ohita tämä ja lisää vain mukautettu CSS ja säädä js (kuvassa alla)..

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

Muokattu CSS

Tämä on CSS lisätäksesi aiemmin ladatun tyylitaulukon.

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

Säädä Javascriptiäsi

Nyt yksinkertaista muokata javascriptiä, jonka olet aiemmin lisännyt tekstiparametrin poistamiseksi ja sen sijaan, että asettaisit kuvakkeen vääriksi, anna sille mukautettu luokanimi.

(toiminto () {
tinymce.PluginManager.add ('my_mce_button', toiminto (toimittaja, URL) {
editor.addButton ('my_mce_button', {
kuvake: 'my-mce-icon',
onclick: function () {
editor.insertContent ('WPExplorer.com on mahtava!');
}
});
});
}) ();

Painikkeen lisääminen alavalikossa

MCE-painikkeen alivalikko

Aiemmin mainitsin, että tonnin uusien kuvakkeiden lisääminen TinyMCE-palkkiin on huono idea (ja se on), joten katso alla olevaa koodia nähdäksesi kuinka voit muokata javascriptiä avataksesi alivalikon mukautetulle painikkeellesi. Jos haluat nähdä sen toiminnassa, tarkista Symple Shortcodes Video.

(toiminto () {
tinymce.PluginManager.add ('my_mce_button', toiminto (toimittaja, URL) {
editor.addButton ('my_mce_button', {
teksti: 'Pudotusnäyte',
kuvake: väärä,
tyyppi: 'menubutton',
valikko: [
{
teksti: 'Kohta 1',
valikko: [
{
teksti: 'alakohta 1',
onclick: function () {
editor.insertContent ('WPExplorer.com on mahtava!');
}
},
{
teksti: 'alakohta 2',
onclick: function () {
editor.insertContent ('WPExplorer.com on mahtava!');
}
}
]
},
{
teksti: 'Kohta 2',
valikko: [
{
teksti: 'alakohta 1',
onclick: function () {
editor.insertContent ('WPExplorer.com on mahtava!');
}
},
{
teksti: 'alakohta 2',
onclick: function () {
editor.insertContent ('WPExplorer.com on mahtava!');
}
}
]
}
]
});
});
}) ();

Ponnahdusikkunan lisääminen nappiin napsauttamalla

Yllä olevassa esimerkissä saatat huomata, että jokainen painike lisää vain tekstin ”WPExplorer.com on mahtava!” mikä on hienoa, mutta entä ponnahdusikkunan luominen, jossa käyttäjä voi muuttaa sitä, mitä tekstiin lisätään? Nyt se olisi suloista! Ja se on jotain, jonka olen lisännyt Symple Shortcode -sovelluksen versioon 1.6, joten plugin on paljon käyttäjäystävällisempi.

WordPress MCE -ponnahdusikkuna

(toiminto () {
tinymce.PluginManager.add ('my_mce_button', toiminto (toimittaja, URL) {
editor.addButton ('my_mce_button', {
teksti: 'Pudotusnäyte',
kuvake: väärä,
tyyppi: 'menubutton',
valikko: [
{
teksti: 'Kohta 1',
valikko: [
{
teksti: 'ponnahdusikkuna',
onclick: function () {
editor.windowManager.open ({
otsikko: 'Lisää satunnainen lyhytkoodi',
vartalo: [
{
tyyppi: 'textbox',
nimi: 'textboxName',
otsikko: 'Tekstikenttä',
arvo: '30'
},
{
tyyppi: 'textbox',
nimi: 'multilineName',
otsikko: 'Monirivinen tekstikenttä',
arvo: 'Voit sanoa paljon tavaraa täällä',
monilinja: totta,
minleveys: 300,
minKorkeus: 100
},
{
tyyppi: 'listbox',
nimi: 'listboxName',
etiketti: 'Listaruutu',
'arvot': [
{teksti: 'Vaihtoehto 1', arvo: '1'},
{teksti: 'Vaihtoehto 2', arvo: '2'},
{teksti: 'Vaihtoehto 3', arvo: '3'}
]
}
],
lähetä: toiminto (e) {
editor.insertContent ('[random_shortcode textbox = "' + e.data.textboxName + '" multiline = "' + e.data.multilineName + '" listbox = "' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
}) ();

Tämä on siistiä … mitä nyt?

Hyvä kysymys! Nyt on aika ottaa nämä mahtavia parannuksia ja luoda jotain eeppistä tai päivittää laajennuksia / teemoja yhteensopivaksi WordPress 3.9: n uuden TinyMCE: n kanssa. Kerro minulle, mitä keksit alla olevissa kommenteissa!

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