Izmantojot TinyMCE redaktoru programmā WordPress [Guide]

Lai gan viņi var nezināt tā nosaukumu, visi, kas izmanto WordPress, ir pazīstami ar TinyMCE redaktors. Tas ir redaktors, ko izmantojat, veidojot vai rediģējot savu saturu - tas ir ar pogām, lai izveidotu treknrakstu tekstu, virsrakstus, teksta izlīdzināšanu utt. Tieši to mēs aplūkosim šajā amatā, un es jums parādīšu kā jūs varat pievienot funkcionalitāti un kā to var izmantot savos spraudnēs.

Redaktors ir veidots, balstoties uz platformas neatkarīgu Javascript sistēmu, ko sauc par TinyMCE, ko izmanto vairākos projektos tīmeklī. Tā ir lieliska API, kas WordPress ļauj jums pieskarties, lai izveidotu savas pogas un pievienotu to citām WordPress vietām.

Pieejamo pogu pievienošana

WordPress izmanto dažas iespējas, kas pieejamas TinyMCE, lai atspējotu konkrētas pogas - piemēram, virsrakstu, apakšindeksu un horizontālos noteikumus -, lai attīrītu saskarni. Tos var pievienot atpakaļ bez pārāk daudz satraukuma.

Pirmais solis ir izveidot spraudni. Aplūkojiet WordPress kodu, kā to izdarīt. Īsumā, jūs varat iegūt, izveidojot mapi ar nosaukumu “my-mce-plugin”, kas atrodas mapē wp-content / plugins. Izveidojiet tādu pašu nosaukumu failu ar PHP paplašinājumu: my-mce-plugin.php.

Ielīmējiet šo failu:

  
Kad tas izdarīts, jums vajadzētu būt iespējai izvēlēties šo spraudni programmā WordPress un aktivizēt to. No šī brīža visu kodu var ielīmēt šī faila iekšpusē.
 
Tātad, atpakaļ uz iespējot dažas iebūvētas, bet slēptās pogas. Lūk, kods, kas ļauj iespējot trīs minētos pogas:
 
 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); funkcija my_tinymce_buttons ($ pogas) $ pogas [] = 'virsraksts'; $ pogas [] = 'apakšindekss'; $ pogas [] = hr; atgriezties $ pogām;  
 
 
 
Lai uzzinātu, kuras pogas var pievienot un ko tās sauc, apskatiet sarakstu, kas atrodams TinyMCE dokumentācijā kontrolei.
 
Mūsu pašu pogas izveide
 
Kā veidot savas pogas no nulles? Daudzās tīmekļa vietnēs koda izcelšanai tiek izmantota Prism, kas kodēšanas segmentu iezīmēšanai izmanto ļoti semantisku pieeju. Jums ir jāievieto jūsu kods  un 
 tagi, kaut kas līdzīgs šim:
 
$ asjaolers = 'vērtība'
 
Izveidosim pogu, kas to darīs mums!
 
Tas ir trīs posmu process. Jums būs jāpievieno poga, jāielādē javascript fails un jāraksta JavaScript faila saturs. Sāksim!
 
Pogas pievienošana un Javascript faila ielāde ir diezgan vienkārša, šeit ir kods, ko izmantoju, lai to paveiktu:
 
 add_filter ('mce_buttons', 'pre_code_add_button'); funkcija pre_code_add_button ($ pogas) $ pogas [] = 'pre_code_button'; atgriezties $ pogām;  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'; atgriezties $ plugin_array;  
 
Kad es redzu konsultācijas par to, es bieži redzu 2 problēmas.
 
Viņi to nevēlas pieminēt pre_code_add_button () funkcijai pievienotajam pogas nosaukumam jābūt tādam pašam kā $ plugin_array mainīgā atslēga pre_code_add_javascript () funkcijā. Mums būs arī izmantot to pašu virkni mūsu Javascript vēlāk.
 
Dažas konsultācijas arī izmantojiet papildu admin_head āķi, lai aptītu visu. Lai gan tas darbosies, tas nav vajadzīgs, un, tā kā Codex to neizmanto, tas, iespējams, būtu jāizvairās.
 
Nākamais solis ir rakstīt dažas Javascript, lai īstenotu mūsu funkcionalitāti. Lūk, ko es izmantoju, lai iegūtu 
 un  tagus izvadīt uzreiz.
 
 (funkcija () tinymce.PluginManager.add ('pre_code_button', funkcija (redaktors, url) editor.addButton ('pre_code_button', text: 'Prism', ikona: false, onclick: function () var selected = tinyMCE.activeEditor.selection.getContent (); var content = '
'+ atlasīts +'
"; editor.insertContent (saturs + "n"); ); ); ) (); 
 
To lielākoties nosaka tas, kā TinyMCE spraudnis ir jākodē, jūs varat atrast informāciju par to TinyMCE dokumentācijā. Pašlaik viss, kas jums jāzina, ir tas pogas nosaukums (pre_code_button) jāizmanto 2. un 3. rindā. 4. rindas "teksta" vērtība tiks parādīta, ja neizmantojat ikonu (mēs apskatīsim ikonu pievienošanu brīdī).
 
Onclick metode nosaka to, ko šī poga veic, noklikšķinot uz tās. Es vēlos to izmantot, lai ieslēgtu atlasīto tekstu iepriekš aprakstītajā HTML struktūrā.
 
Izvēlēto tekstu var izmantot, izmantojot tinyMCE.activeEditor.selection.getContent (). Pēc tam es apvilkšu elementus ap to un ievietoju to, aizstājot izcelto saturu ar jauno elementu. Esmu arī pievienojis jaunu līniju, lai varētu viegli sākt rakstīt pēc koda elementa.
 
Ja vēlaties izmantot ikonu, iesakām izvēlēties vienu no Dashicons kopas, kas piegādā kopā ar WordPress. Izstrādātāja atsauce ir lielisks līdzeklis, lai atrastu ikonas un to CSS / HTML / Glyph. Atrodiet koda simbolu un atzīmējiet to zem tā: f475.
 
Mūsu spraudnim būs jāpievieno stila lapa un pēc tam jāpievieno vienkāršs stils, lai parādītu mūsu ikonu. Vispirms pievienojiet savu stilu WordPress:
 
 add_action ('admin_enqueue_scripts', 'pre_code_styles'); funkcija pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 
Atgriezieties pie Javascript un blakus ikonai addButton, nomainiet “nepatiesa” ar klasi, kuru vēlaties, lai jūsu poga būtu - es to izmantoju pre_code_button.
 
Tagad savā spraudņa direktorijā izveidojiet failu style.css un pievienojiet šādu CSS:
 
 i.mce-i-pre_code_button: pirms font-family: dashicons; saturs: "475";  
 
 
 
Ņemiet vērā, ka poga saņems mce-i- [jūsu klase šeit] klasi, ko varat izmantot, lai mērķētu un pievienotu stilus. Norādiet fontu kā dashicons un saturu, izmantojot unikoda vērtību no iepriekš.
 
TinyMCE izmantošana citur
 
Spraudņi bieži rada tekstu, lai ievadītu garāku tekstu, Vai nebūtu lieliski, ja mēs varētu izmantot TinyMCE tur arī? Protams, mēs varam, un tas ir diezgan vienkārši. Funkcija wp_editor () ļauj mums izvadīt vienu no jebkuras vietas administratorā, kā tas izskatās:
 
wp_editor ($ original_content, $ element_id, $ iestatījumi);
 
Pirmais parametrs nosaka kastes sākotnējo saturu. To var izmantot, lai, piemēram, ielādētu iespēju no datu bāzes. Otrais parametrs nosaka HTML elementa ID. Trešais parametrs ir iestatījumu kopums. Lai izlasītu precīzus iestatījumus, ko varat izmantot, apskatiet wp redaktora dokumentāciju.
 
Vissvarīgākais iestatījums ir textarea_name. Tas satur teksta elementa nosaukuma atribūtu, kas ļauj viegli saglabāt datus. Kā redaktors izmanto opciju lapā:
 
$ settings = masīvs ('textarea_name' => 'buyer_bio');
 
wp_editor (get_option ('buyer_bio'), 'buyer_bio', $ iestatījumi;
 
Tas atbilst šāda koda rakstīšanai, kas radītu vienkāršu tekstu:
 
<?php get_option( 'buyer_bio' ) ?>
 
Secinājums
 
TinyMCE redaktors ir lietotājam draudzīgs veids, kā nodrošināt lietotājiem lielāku elastību, ievadot saturu. Tas ļauj tiem, kuri nevēlas formatēt savu saturu, vienkārši ierakstīt to un veikt ar to, kā arī tos, kas vēlas ar to apvērsties, lai tērētu tik daudz laika, cik nepieciešams, lai to iegūtu..
 
Jaunas pogas un funkcionalitātes izveide var tikt veikta ļoti moduļu veidā, un mēs tikko saskrāpējām iespēju virsmu. Ja zināt par īpaši labu TinyMCE spraudni vai lietošanas gadījumu, kas ir palīdzējis jums daudz, dariet mums zināmu komentārus tālāk!