Käyttämällä TinyMCE-editoria WordPressissa [Opas]

Vaikka he eivät ehkä tiedä sen nimeä, kaikki, jotka käyttävät WordPressia, tuntevat sen TinyMCE-editori. Se on editori, jota käytät luodessasi tai muokkaamalla sisältöäsi - siinä on painikkeet lihavoidun tekstin, otsikoiden, tekstin kohdistamisen ja niin edelleen luomiseen. Tätä me tarkastelemme tässä postissa, ja aion näyttää sinulle miten voit lisätä toimintoja ja miten voit käyttää sitä laajennuksissasi.

Toimittaja on rakennettu alustasta riippumattomalle Javascript-järjestelmälle, jota kutsutaan nimellä TinyMCE ja jota käytetään useissa Web-projekteissa. Siinä on suuri API, jonka avulla WordPress voit luoda omia painikkeita ja lisätä sen muihin WordPress-kohteisiin.

Käytettävissä olevien painikkeiden lisääminen

WordPress käyttää joitakin TinyMCE-ohjelmassa käytettävissä olevia vaihtoehtoja poistaakseen tiettyjä painikkeita - kuten ylätunnistetta, alaindeksiä ja horisontaalisia sääntöjä - rajapinnan puhdistamiseksi. Ne voidaan lisätä takaisin ilman liikaa hätää.

Ensimmäinen askel on luoda laajennus. Katsokaa WordPress-koodia siitä, miten se tehdään. Lyhyesti sanottuna voit luoda kansion nimeltä 'my-mce-plugin' wp-content / plugins-kansiossa. Luo tiedosto, jolla on sama nimi ja PHP-laajennus: my-MCE-plugin.php.

Liitä seuraavassa tiedostossa:

  
Kun olet tehnyt sen, sinun pitäisi pystyä valitsemaan tämä plugin WordPressissa ja aktivoimaan se. Tämän jälkeen kaikki koodi voidaan liittää tämän tiedoston sisään.
 
Joten, takaisin joidenkin sisäänrakennettujen mutta piilotettujen painikkeiden ottaminen käyttöön. Tässä on koodi, jonka avulla voimme ottaa käyttöön mainitut kolme painiketta:
 
 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); toiminto my_tinymce_buttons ($ painikkeet) $ painikkeet [] = 'superscript'; $ painikkeet [] = 'alaindeksi'; $ painikkeet [] = hr; palaa $ -painikkeita;  
 
 
 
Jos haluat tietää, mitkä painikkeet voidaan lisätä ja mitä niitä kutsutaan, tutustu TinyMCE-dokumenttien luetteloon.
 
Oman painikkeen luominen
 
Miten luoda omia painikkeita tyhjästä? Monet sivustot käyttävät Prismia koodin korostukseen, jossa käytetään hyvin semanttista lähestymistapaa koodisegmenttien merkitsemiseen. Sinun täytyy pakata koodi sisälle  ja 
 tunnisteet, jotain tällaista:
 
$ muuttuja = 'arvo'
 
Luomme painikkeen, joka tekee tämän meille!
 
Tämä on kolmivaiheinen prosessi. Sinun on lisättävä painike, ladattava javascript-tiedosto ja kirjoitettava JavaScript-tiedoston sisältö. Aloitetaan!
 
Painikkeen lisääminen ja Javascript-tiedoston lataaminen on melko yksinkertaista, tässä on koodi, jonka sain sen tekemiseen:
 
 add_filter ('mce_buttons', 'pre_code_add_button'); toiminto pre_code_add_button ($ painikkeet) $ painikkeet [] = 'pre_code_button'; palaa $ -painikkeita;  add_filter ('mce_external_plugins', 'pre_code_add_javascript'); toiminto pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri (). '/Tinymce-plugin.js'; palauta $ plugin_array;  
 
Kun näen opetusohjelmia tästä, näen usein 2 ongelmaa.
 
He eivät lainkaan mainitse sitä pre_code_add_button () -toimintoon lisätyn painikkeen nimen on oltava sama kuin $ plugin_array -muuttujan avain pre_code_add_javascript () -toiminnossa. Meidän on myös käytä samaa merkintää Javascriptissä myöhemmin.
 
Jotkut opetusohjelmat myös käytä ylimääräistä admin_head-koukkua kaiken kääriin. Vaikka tämä toimii, sitä ei tarvita, ja koska Codex ei käytä sitä, se olisi todennäköisesti vältettävä.
 
Seuraava askel on kirjoittaa joitakin Javascriptiä toimintojen toteuttamiseksi. Tässä on mitä sain 
 ja  tunnisteet tulostetaan kerralla.
 
 (toiminto () tinymce.PluginManager.add ('pre_code_button', toiminto (editori, url) editor.addButton ('pre_code_button', text: 'Prism', kuvake: false, onclick: function () var selected = tinyMCE.activeEditor.selection.getContent (); var content = '
'+ valittu +'
'; editor.insertContent (sisältö + "n"); ); ); ) (); 
 
Suurin osa tästä määräytyy siitä, miten TinyMCE-laajennuksen oletetaan olevan koodattu, josta löydät tietoa TinyMCE-dokumentaatiosta. Nyt sinun tarvitsee vain tietää painikkeen nimi (Pre_code_button) olisi käytettävä rivillä 2 ja 3. "Tekstin" arvo rivillä 4 näytetään, jos et käytä kuvaketta (tarkastelemme kuvakkeiden lisäämistä hetkessä).
 
Onclick-menetelmä sanelee, mitä tämä painike tekee, kun sitä napsautetaan. Haluan käyttää sitä käärittämään valitun tekstin aiemmin käsitellystä HTML-rakenteesta.
 
Valittu teksti voidaan tarttua käyttämällä tinyMCE.activeEditor.selection.getContent (). Sitten käärin sen ympärillä olevat elementit ja lisää ne korvaten korostetun sisällön uuteen elementtiin. Olen myös lisännyt uuden rivin, jotta voin helposti aloittaa kirjoittamisen koodielementin jälkeen.
 
Jos haluat käyttää kuvaketta, suosittelen valitsemaan yhden Dashicons-sarjasta, joka toimitetaan WordPressin kanssa. Kehittäjän referenssissä on erinomainen työkalu kuvakkeiden ja niiden CSS / HTML / Glyphin löytämiseen. Etsi koodisymboli ja merkitse sen alla oleva unicode: f475.
 
Meidän on liitettävä tyylejä taulukkoomme ja lisättävä sitten yksinkertainen tyyli kuvakkeen näyttämiseksi. Ensinnäkin lisäämme tyyliämme WordPressiin:
 
 add_action ('admin_enqueue_scripts', 'pre_code_styles'); toiminto pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 
Palaa Javascriptiin ja korvaa addButton-toiminnon kuvakkeen vieressä “väärä” luokka, jonka haluat painikkeen olevan - käytin pre_code_button.
 
Luo nyt style.css-tiedosto plugin-hakemistoon ja lisää seuraava CSS:
 
 i.mce-i-pre_code_button: ennen font-family: dashicons; sisältö: "f475";  
 
 
 
Huomaa, että painike saa mce-i- [luokkasi täällä] luokka, jonka avulla voit kohdistaa ja lisätä tyylejä. Määritä fontti dashiconeiksi ja sisältö käyttäen unicode-arvoa aikaisemmin.
 
TinyMCE: n käyttö muualla
 
Lisäosat luovat usein tekstiä pitempien tekstien syöttämiseksi, eikö olisi hienoa, jos voisimme käyttää myös TinyMCE: tä? Tietenkin voimme, ja se on melko helppoa. Wp_editor () -toiminnon avulla voimme tuottaa yhden missä tahansa admin-palvelimessa.
 
wp_editor ($ esialginen_sisältö, $ element_id, $ asetukset);
 
Ensimmäinen parametri asettaa laatikon alkuperäisen sisällön. Tätä voidaan käyttää esimerkiksi lataamaan vaihtoehto tietokannasta. Toinen parametri määrittää HTML-elementin tunnuksen. Kolmas parametri on joukko asetuksia. Jos haluat lukea tarkat asetukset, joita voit käyttää, tutustu wp-editorin dokumentaatioon.
 
Tärkein asetus on textarea_name. Tämä kertoo textarea-elementin nimen määritteen, jonka avulla voit tallentaa tiedot helposti. Seuraavassa kuvataan, miten editori näyttää, kun sitä käytetään vaihtoehtosivulla:
 
$ settings = array ('textarea_name' => 'buyer_bio');
 
wp_editor (get_option ('buyer_bio'), 'buyer_bio', $ asetukset);
 
Tämä vastaa seuraavan koodin kirjoittamista, joka johtaa yksinkertaiseen tekstiin:
 
<?php get_option( 'buyer_bio' ) ?>
 
johtopäätös
 
TinyMCE-editori on käyttäjäystävällinen tapa antaa käyttäjille enemmän joustavuutta sisällön syöttämisessä. Se antaa niille, jotka eivät halua muotoilla sisältöä, vain kirjoittaa sen ja tehdä sen, ja ne, jotka haluavat viettää sen kanssa, viettämään niin paljon aikaa kuin he tarvitsevat sen aivan oikein.
 
Uusien painikkeiden ja toimintojen luominen voidaan tehdä hyvin modulaarisesti, ja olemme vain raapineet mahdollisuuksien pintaa. Jos tiedät erityisen hyvän TinyMCE-laajennuksen tai käyttötapauksen, joka on auttanut sinua paljon, kerro meille seuraavista kommenteista!