Uporaba urejevalnika TinyMCE v WordPressu [Vodnik]

Čeprav morda ne poznajo njegovega imena, vsakdo, ki uporablja WordPress, pozna Urejevalnik TinyMCE. To je urejevalnik, ki ga uporabljate, ko ustvarjate ali urejate vsebino - tista z gumbi za ustvarjanje krepkega besedila, naslovi, poravnava besedila in tako naprej. To bomo pogledali na tem mestu, in pokazal vam bom kako lahko dodate funkcije in kako ga lahko uporabite v vtičnikih.

Urejevalnik je zgrajen na platformi neodvisni Javascript sistem, imenovan TinyMCE, ki se uporablja v številnih projektih na spletu. Ima odličen API, ki vam omogoča WordPress, da ustvarite lastne gumbe in ga dodate na druge lokacije v WordPressu..

Dodajanje razpoložljivih gumbov

WordPress uporablja nekatere možnosti, ki so na voljo v programu TinyMCE, da onemogoči določene gumbe - kot so nadpisani, spodnji in vodoravni - za čiščenje vmesnika. Lahko se dodajo nazaj brez prevelikega napora.

Prvi korak je ustvariti vtičnik. Oglejte si WordPress kodeks o tem, kako to storiti. Na kratko, ustvarite lahko mapo z imenom "my-mce-plugin" v mapi wp-content / plugins. Ustvarite datoteko z istim imenom z razširitvijo PHP: my-mce-plugin.php.

V to datoteko prilepite naslednje:

Ko končate, morate biti sposobni izbrati ta vtičnik v programu WordPress in ga aktivirati. Vso kodo od zdaj naprej lahko prilepite v to datoteko.

Torej, nazaj omogočanje nekaterih vgrajenih, a skritih gumbov. Tukaj je koda, ki nam omogoča, da omogočimo 3 gumbe, ki sem jih omenil:

 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); funkcija my_tinymce_buttons ($ buttons) $ buttons [] = 'nadpisano'; $ buttons [] = 'indeks'; $ buttons [] = hr; vrnitev $ gumbov;

Če želite vedeti, katere gumbe je mogoče dodati in kako se kličejo, si oglejte seznam, ki je v dokumentaciji TinyMCE za nadzor.

Ustvarjanje lastnih gumbov

Kaj pa ustvarjanje lastnih gumbov iz nič? Številne spletne strani uporabljajo Prism za poudarjanje kode, ki uporablja zelo semantični pristop pri označevanju segmentov kode. Kodo morate zaviti znotraj in

 oznake, nekaj takega:
 $ variable = 'value'
 Ustvarimo gumb, ki bo to naredil za nas!
 To je postopek v treh korakih. Dodati morate gumb, naložiti javascript datoteko in dejansko napisati vsebino datoteke Javascript. Začnimo!
 Dodajanje gumba in nalaganje datoteke Javascript je precej preprosto, tukaj je koda, ki sem jo uporabil za to:
  add_filter ('mce_buttons', 'pre_code_add_button'); funkcija pre_code_add_button ($ gumbi) $ buttons [] = 'gumb pre_code_button'; vrnitev $ gumbov;  add_filter ('mce_external_plugins', 'pre_code_add_javascript'); funkcija pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri (). '/tinymce-plugin.js'; vrne $ plugin_array;  
 Ko vidim tutorials o tem sem pogosto videli 2 težave.
 Tega ne omenjajo ime gumba, dodano v funkciji pre_code_add_button (), mora biti enako ključu za spremenljivko $ plugin_array v funkciji pre_code_add_javascript (). Prav tako bomo morali uporabite isti niz v našem Javascriptu kasneje.
 Nekaj vaj tudi uporabite dodaten admin_head kavelj, da vse ovije. Čeprav bo to delovalo, to ni potrebno in ker ga kodeks ne uporablja, se ga je verjetno treba izogibati.
 Naslednji korak je, da napišete nekaj Javascriptja, ki bo omogočal našo funkcionalnost. Tukaj sem dobil 
 in  izpisujejo vse naenkrat.
  (function () tinymce.PluginManager.add ('pre_code_button', funkcija (urejevalnik, url) editor.addButton ('pre_code_button', text: 'Prism', ikona: false, onclick: function () var selected = tinyMCE.activeEditor.selection.getContent (); var content = '»+ izbrano +«
'; editor.insertContent (vsebina + "\ t ); ); ) (); 
 Večino tega narekuje, kako naj bo kodiran vtičnik TinyMCE, nekaj informacij o tem pa lahko najdete v dokumentaciji TinyMCE. Za zdaj, vse kar morate vedeti je to ime vašega gumba (gumb pre_code_but) je treba uporabiti v vrstici 2 in 3. Vrednost besedila v vrstici 4 bo prikazana, če ne uporabite ikone (pogledali bomo dodajanje ikon v trenutku).
 Metoda onclick narekuje, kaj ta gumb počne, ko ga kliknete. Želim ga uporabiti za ovijanje izbranega besedila v strukturi HTML, o kateri smo prej razpravljali.
 Izbrano besedilo lahko uporabite tinyMCE.activeEditor.selection.getContent (). Nato elemente okrog njega ovijem in vstavim, tako da označeno vsebino zamenjam z novim elementom. Dodal sem tudi novo vrstico, tako da lahko preprosto začnem pisati po elementu kode.
 Če želite uporabiti ikono, predlagam, da izberete eno izmed Dashiconsovih nizov, ki so dobavljeni z WordPressom. Referenca razvijalcev je odlično orodje za iskanje ikon in njihovih CSS / HTML / Glyph. Poiščite kodni simbol in zabeležite Unicode pod njim: f475.
 Moramo priložiti slogovne datoteke na naš vtičnik in nato dodati preprost slog za prikaz naše ikone. Najprej dodamo naš stil v WordPress:
  add_action ('admin_enqueue_scripts', 'pre_code_styles'); funkcija pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 Vrnite se na Javascript in poleg ikone v funkciji addButton zamenjajte “false” z razredom, ki ga želite, da ima vaš gumb - sem ga uporabil pre_code_button.
 Zdaj ustvarite datoteko style.css v imeniku pluginov in dodajte naslednje CSS:
  i.mce-i-pre_code_button: pred font-family: dashicons; vsebina: "f475";  
  
 Upoštevajte, da bo gumb prejel mce-i- [vaš razred tukaj] razred, ki ga lahko uporabite za ciljanje in dodajanje slogov. Določite pisavo kot dashicons in vsebino, ki uporablja vrednost unicode iz prejšnjih.
 Uporaba TinyMCE drugje
 Vtičniki pogosto ustvarijo besedilna polja za vnašanje daljšega besedila, ne bi bilo super, če bi lahko uporabili tudi TinyMCE? Seveda lahko, in to je zelo enostavno. Funkcija wp_editor () nam omogoča, da na enem mestu oddajamo kjerkoli v adminu.
 wp_editor ($ initial_content, $ element_id, $ settings);
 Prvi parameter določa začetno vsebino polja. To se lahko na primer uporabi za nalaganje možnosti iz baze podatkov. Drugi parameter določa ID elementa HTML. Tretji parameter je niz nastavitev. Če želite prebrati natančne nastavitve, ki jih lahko uporabite, si oglejte dokumentacijo za urejevalnik wp.
 Najpomembnejša nastavitev je textarea_name. To napolni ime atributa elementa textarea, kar omogoča enostavno shranjevanje podatkov. Kako izgleda moj urejevalnik, ko se uporablja na strani z možnostmi:
 $ settings = array ('textarea_name' => 'buyer_bio');
 wp_editor (get_option ('buyer_bio'), 'buyer_bio', $ settings);
 To je enako pisanju naslednje kode, ki bi povzročila preprosto besedilno polje:
 <?php get_option( 'buyer_bio' ) ?>
 Zaključek
 Urejevalnik TinyMCE je uporabniku prijazen način, da uporabnikom omogoči večjo prilagodljivost pri vnosu vsebine. Omogoča tistim, ki ne želijo oblikovati njihove vsebine, da jo preprosto vtipkajo in naredijo z njo, in tistimi, ki želijo z njim prevarati, da porabijo toliko časa, kolikor jih potrebujejo.
 Ustvarjanje novih gumbov in funkcionalnosti se lahko izvede na zelo modularen način in samo smo opraskali površino možnosti. Če poznate posebej dober vtičnik TinyMCE ali primer uporabe, ki vam je veliko pomagal, nam sporočite spodaj!