TinyMCE redaktori kasutamine WordPressis [Guide]

Kuigi nad ei tea oma nime, on kõik, kes WordPressit kasutavad, tuttav TinyMCE toimetaja. See on redaktor, mida kasutate oma sisu loomisel või redigeerimisel - see on nuppudega rasvase teksti, pealkirjade, teksti joondamise jms loomiseks. Seda vaatame selles postituses ja ma näitan sulle kuidas funktsionaalsust lisada ja kuidas seda oma pluginates kasutada.

Toimetaja on ehitatud platvormist sõltumatule Javascript-süsteemile, mida nimetatakse TinyMCE-ks ja mida kasutatakse mitmetes veebi projektides. See on suurepärane API, mida WordPress võimaldab teil oma nuppude loomiseks ja selle lisamiseks teistesse WordPressi asukohtadesse.

Saadaolevate nuppude lisamine

WordPress kasutab mõningaid võimalusi, mis on saadaval TinyMCE-s, et keelata liidese puhastamiseks teatud nupud - näiteks ülekirjutus, alaindeks ja horisontaalsed reeglid. Neid saab lisada ilma liigse müra.

Esimene samm on plugina loomine. Heitke pilk WordPressi koodeksile, kuidas seda teha. Lühidalt öeldes saad kaustaga wp-content / plugins kausta nimega „my-mce-plugin”. Looge sama nimega fail PHP laiendiga: my-mce-plugin.php.

Selle faili sees kleepige:

Kui olete seda teinud, peaksite selle plugina valima WordPressis ja aktiveerima. Kogu sellest koodist saab selle faili sees kleepida.

Niisiis, tagasi sisseehitatud, kuid peidetud nuppude lubamine. Siin on kood, mis võimaldab meil 3 mainitud nuppu lubada:

 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); funktsioon my_tinymce_buttons ($ nupud) $ nupud [] = 'ülekirjutus'; $ nupud [] = 'alaindeks'; $ nupud [] = hr; naasta $ nupud;

Et teada saada, milliseid nuppe saab lisada ja milliseid neid kutsutakse, vaadake TinyMCE dokumentide kontroll-loendit.

Oma nuppude loomine

Kuidas luua oma nuppe nullist? Paljud veebilehed kasutavad koodi esiletõstmiseks Prismit, mis kasutab koodisegmentide märgistamisel väga semantilist lähenemist. Te peate oma koodi pakkima ja

 sildid, midagi sellist:
 $ változaja = 'väärtus'
 Loome nupp, mis seda meie heaks teeb!
 See on kolmeastmeline protsess. Peate lisama nupu, laadima javascripti faili ja kirjutama Javascripti faili sisu. Alustame!
 Nupu lisamine ja JavaScripti faili laadimine on üsna lihtne, siin on kood, mida ma seda tegin:
  add_filter ('mce_buttons', 'pre_code_add_button'); funktsioon pre_code_add_button ($ nupud) $ nupud [] = 'pre_code_button'; naasta $ nupud;  add_filter ('mce_external_plugins', 'pre_code_add_javascript'); funktsioon pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri (). '/tinymce-plugin.js'; tagasi $ plugin_array;  
 Kui näen õpetusi selle kohta, näen ma sageli 2 probleemi.
 Nad ei maininud seda funktsiooni pre_code_add_button () lisatud nupu nimi peab olema sama kui $ plugin_array muutuja võti pre_code_add_javascript () funktsioonis. Me peame ka seda tegema kasutage sama stringi meie Javascriptis hiljem.
 Mõned õpetused ka kasutage täiendavat admin_head konksu, et kõike üles keerata. Kuigi see toimib, ei ole see vajalik ja kuna Codex seda ei kasuta, tuleks seda tõenäoliselt vältida.
 Järgmine samm on kirjutada mõned funktsioonid meie Javascript rakendamiseks. Siin on see, mida ma kasutasin 
 ja  sildid väljastatakse korraga.
  (funktsioon () tinymce.PluginManager.add ('pre_code_button', funktsioon (toimetaja, url) editor.addButton ('pre_code_button', text: 'Prism', ikoon: vale, onclick: function () var selected = tinyMCE.activeEditor.selection.getContent (); var content = ''+ valitud +'
'; editor.insertContent (sisu + "n"); ); ); ) (); 
 Enamik sellest on tingitud sellest, kuidas TinyMCE plugin peaks olema kodeeritud, selle kohta leiate infot TinyMCE dokumentatsioonis. Praegu on see kõik, mida vaja teada nupu nimi (pre_code_button) tuleks kasutada reas 2 ja 3. Kui te ei kasuta ikooni (kuvame ikoonide lisamise hetkega), kuvatakse reas 4 "teksti" väärtus..
 Onclick meetod määrab, mida see nupp klõpsamisel teeb. Tahan seda kasutada valitud teksti murdmiseks varem käsitletud HTML-struktuuri.
 Valitud teksti saab haarata tinyMCE.activeEditor.selection.getContent (). Siis ma mina selle ümber elemendid ja sisestan selle, asendades esiletõstetud sisu uue elemendiga. Olen lisanud ka uue rea, et saaksin lihtsalt pärast koodi elementi kirjutada.
 Kui soovid kasutada ikooni, soovitan valida ühe Dashicons'i komplektist, mis saadetakse WordPressiga. Arendaja viide on suurepärane vahend ikoonide ja nende CSS / HTML / Glyph leidmiseks. Leidke koodi sümbol ja märkige selle all olev unikood: f475.
 Peame oma pluginale lisama stiili, seejärel lisama oma ikooni kuvamiseks lihtsa stiili. Esmalt lisame oma stiili WordPressile:
  add_action ('admin_enqueue_scripts', 'pre_code_styles'); funktsioon pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 Minge tagasi Javascripti ja asenda addButtoni funktsiooni ikooni kõrval “vale” klassiga, mida soovite, et teie nupp oleks - ma kasutasin pre_code_button.
 Nüüd looge oma plugina kataloogis style.css fail ja lisage järgmine CSS:
  i.mce-i-pre_code_button: enne font-family: dashicons; sisu: "f475";  
  
 Pange tähele, et nupp saab mce-i- [teie klass siin] klass, mida saab kasutada stiilide sihtimiseks ja lisamiseks. Määrake font kui dashicons ja sisu, kasutades unicode'i väärtust varem.
 TinyMCE kasutamine mujal
 Pluginad loovad sageli teksti, et sisestada pikemat teksti, kas poleks tore, kui me saaksime TinyMCE-d seal kasutada? Muidugi saame ja see on üsna lihtne. Funktsioon wp_editor () võimaldab meil väljastada ükskõik millises administraatoris, nii et see näeb välja:
 wp_editor ($ original_content, $ element_id, $ seaded);
 Esimene parameeter määrab kasti algse sisu. Seda saab kasutada näiteks suvandi andmebaasi laadimiseks. Teine parameeter määrab HTML-elemendi ID. Kolmas parameeter on seadistuste massiiv. Lugege täpselt kasutatavatest seadetest ja vaadake wp toimetaja dokumentatsiooni.
 Kõige olulisem seade on textarea_name. See mahutab textarea elemendi nime atribuudi, mis võimaldab teil andmeid lihtsalt salvestada. Järgnevalt näeb, kuidas minu toimetaja valikute lehel kasutatakse:
 $ settings = array ('textarea_name' => 'ostja_bio');
 wp_editor (get_option ('buyer_bio'), 'buyer_bio', $ seaded);
 See võrdub järgmise koodi kirjutamisega, mis tooks kaasa lihtsa teksti:
 <?php get_option( 'buyer_bio' ) ?>
 Järeldus
 TinyMCE-redaktor on kasutajasõbralik viis, mis võimaldab kasutajatel sisu sisestamisel rohkem paindlikkust teha. See võimaldab neil, kes ei soovi oma sisu vormindada, lihtsalt selle kirjutamiseks ja sellega tegelemiseks, ja neile, kes tahavad sellega lollida, kulutada nii palju aega, kui nad seda vajavad..
 Uute nuppude ja funktsionaalsuse loomist saab teha väga modulaarselt, ja me oleme vaid võimaluste pinnale kriimustanud. Kui teate eriti head TinyMCE pluginat või kasutate juhtumit, mis on teid palju aidanud, andke meile allpool olevates kommentaarides teada!