Korištenje TinyMCE urednika u WordPress-u [Vodič]

Iako možda ne znaju njegovo ime, svatko tko koristi WordPress je upoznat s TinyMCE editor. To je uređivač koji koristite kada stvarate ili uređujete svoj sadržaj - onaj s gumbima za stvaranje podebljanog teksta, zaglavlja, poravnanja teksta i tako dalje. To ćemo pogledati u ovom postu i pokazat ću vam kako možete dodati funkcionalnost i kako ga možete koristiti u svojim dodatcima.

Urednik je izgrađen na platformi neovisnom Javascript sustavu nazvanom TinyMCE koji se koristi u brojnim projektima na Webu. To je veliki API koji WordPress vam omogućuje da taknite u za stvaranje vlastite gumbe i dodati ga na druge lokacije unutar WordPress.

Dodavanje dostupnih gumba

WordPress koristi neke opcije dostupne u programu TinyMCE kako bi onemogućio određene tipke - kao što su superscript, subscript i horizontalna pravila - kako bi očistili sučelje. Mogu se vratiti bez previše napora.

Prvi korak je stvaranje dodatka. Pogledajte WordPress codex kako to učiniti. Ukratko, možete proći sa stvaranjem mape pod nazivom 'my-mce-plugin' u mapi wp-content / plugins. Stvorite datoteku s istim nazivom s proširenjem PHP: moja-MCE-plugin.php.

Unutar te datoteke zalijepite sljedeće:

  
Kada završite, trebali biste moći odabrati ovaj dodatak u WordPressu i aktivirati ga. Sav kôd od sada se može zalijepiti unutar te datoteke.
 
Dakle, natrag na omogućujući neke ugrađene, ali skrivene gumbe. Evo koda koji nam omogućuje da omogućimo tri spomenuta gumba:
 
 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); funkcija my_tinymce_buttons ($ gumbi) $ buttons [] = 'superscript'; $ buttons [] = 'indeks'; $ buttons [] = hr; return $ button;  
 
 
 
Da biste znali koje gumbe možete dodati i kako se zovu, pogledajte popis koji se nalazi u TinyMCE dokumentaciji za kontrole.
 
Stvaranje vlastitih gumba
 
Kako o stvaranju vlastitih gumba od nule? Mnoge web stranice koriste Prism za isticanje koda koje koristi vrlo semantički pristup označavanju segmenata koda. Morate omotati kod unutar  i 
 oznake, nešto poput ovoga:
 
$ variable = 'value'
 
Napravimo gumb koji će to učiniti za nas!
 
To je proces u tri koraka. Morat ćete dodati gumb, učitati javascript datoteku i zapravo napisati sadržaj Javascript datoteke. Započnimo!
 
Dodavanje gumba i učitavanje datoteke Javascript prilično je jednostavno, evo koda koji sam upotrijebio za to:
 
 add_filter ('mce_buttons', 'pre_code_add_button'); funkcija pre_code_add_button ($ gumbi) $ buttons [] = 'pre_code_button'; return $ button;  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'; return $ plugin_array;  
 
Kad vidim tutoriale o tome često vidim 2 problema.
 
Nisu to spomenuli ime gumba dodano u funkciji pre_code_add_button () mora biti isto kao i ključ za varijablu $ plugin_array u funkciji pre_code_add_javascript (). Također ćemo morati koristiti isti niz u našem Javascriptu kasnije.
 
Neki tutoriali također upotrijebite dodatnu kuku admin_head da biste sve obavili. Iako će to funkcionirati, nije potrebno i budući da ga Kodeks ne koristi, vjerojatno bi ga trebalo izbjegavati.
 
Sljedeći korak je pisanje Javascripta za implementaciju naše funkcionalnosti. Evo što sam ja dobivao 
 i  sve oznake odjednom.
 
 (function () tinymce.PluginManager.add ('pre_code_button', funkcija (editor, url) editor.addButton ('pre_code_button', text: 'Prism', ikona: false, onclick: function () var selected = tinyMCE.activeEditor.selection.getContent (); var content = '
"+ odabrano +"
„; editor.insertContent (sadržaj + "\ t ); ); ) (); 
 
Većinu toga diktira način na koji se TinyMCE plugin treba kodirati, a neke informacije o tome možete pronaći u dokumentaciji TinyMCE. Za sada, sve što trebate znati je to naziv gumba (Pre_code_button) treba koristiti u 2. i 3. retku. Vrijednost "teksta" u retku 4 bit će prikazana ako ne koristite ikonu (pogledat ćemo dodavanje ikona u trenu).
 
Metoda onclick određuje što ovaj gumb radi kada se klikne. Želim ga koristiti za omatanje odabranog teksta unutar HTML strukture o kojoj smo ranije govorili.
 
Odabrani tekst može se iskoristiti tinyMCE.activeEditor.selection.getContent (). Zatim omotamo elemente oko njega i umetnemo ih, zamjenjujući označeni sadržaj novim elementom. Dodao sam i novu liniju kako bih lako mogao početi pisati nakon elementa koda.
 
Ako želite koristiti ikonu, predlažem da odaberete jednu od Dashicons skupa koji se isporučuje s WordPressom. Referent za razvojne programere ima izvrstan alat za pronalaženje ikona i njihov CSS / HTML / Glyph. Pronađite simbol koda i zabilježite unicode ispod njega: f475.
 
Morat ćemo priložiti tablicu stilova našem dodatku, a zatim dodati jednostavan stil za prikaz naše ikone. Prvo, dodajte naš stil u WordPress:
 
 add_action ('admin_enqueue_scripts', 'pre_code_styles'); funkcija pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 
Vratite se na Javascript i pored ikone u funkciji addButton, zamijenite “lažan” s klasom koju želite da vaš gumb ima - koristio sam pre_code_button.
 
Sada kreirajte datoteku style.css u direktoriju dodataka i dodajte sljedeći CSS:
 
 i.mce-i-pre_code_button: prije font-family: dashicons; sadržaj: "f475";  
 
 
 
Imajte na umu da će gumb primiti mce-i- [vaš razred ovdje] klasa koju možete koristiti za ciljanje i dodavanje stilova. Odredite font kao dashicons i sadržaj pomoću unicode vrijednosti iz ranijeg.
 
Korištenje TinyMCE drugdje
 
Dodaci često stvaraju tekstualna područja za unos dužeg teksta, ne bi li bilo sjajno kad bismo mogli koristiti i TinyMCE? Naravno da možemo i prilično je lako. Funkcija wp_editor () omogućuje nam da izlazimo bilo gdje u administratoru, evo kako to izgleda:
 
wp_editor ($ initial_content, $ element_id, $ settings);
 
Prvi parametar postavlja početni sadržaj okvira. To se, primjerice, može koristiti za učitavanje opcije iz baze podataka. Drugi parametar postavlja ID elementa HTML-a. Treći parametar je niz postavki. Da biste pročitali o točnim postavkama koje možete koristiti, pogledajte dokumentaciju za wp editor.
 
Najvažnija postavka je textarea_name. To popunjava atribut imena elementa textarea, omogućujući vam da lako pohranite podatke. Evo kako moj urednik izgleda kada se koristi na stranici s opcijama:
 
$ settings = array ('textarea_name' => 'buyer_bio');
 
wp_editor (get_option ('buyer_bio'), 'buyer_bio', $ postavke);
 
Ovo je ekvivalentno pisanju sljedećeg koda, koji bi rezultirao jednostavnim tekstom:
 
<?php get_option( 'buyer_bio' ) ?>
 
Zaključak
 
TinyMCE editor je user-friendly način koji korisnicima omogućuje veću fleksibilnost pri unosu sadržaja. Omogućuje onima koji ne žele formatirati njihov sadržaj samo da ga tipkaju i završe s njom, i onima koji žele da se zajebavaju s njom kako bi potrošili onoliko vremena koliko im je potrebno.
 
Stvaranje novih gumba i funkcionalnosti može se obaviti na vrlo modularan način, a samo smo ogrebali površinu mogućnosti. Ako znate za posebno dobar TinyMCE dodatak ili slučaj upotrebe koji vam je puno pomogao, obavijestite nas u komentarima ispod!