Utilizarea editorului TinyMCE în WordPress [Ghid]

Deși este posibil să nu știe numele său, oricine folosește WordPress este familiarizat cu Editorul TinyMCE. Este editorul pe care îl folosiți atunci când creați sau editați conținutul dvs. - unul cu butoanele pentru crearea textului îngroșat, titluri, alinierea textului și așa mai departe. Asta vom arunca o privire în acest post și vă voi arăta cum puteți adăuga funcționalități și cum îl puteți utiliza în pluginurile dvs..

Editorul este construit pe un sistem de Javascript independent de platformă numit TinyMCE, care este utilizat într-o serie de proiecte de pe Web. Acesta are un API excelent pe care WordPress vă permite să vă atingeți pentru a crea propriile butoane și a le adăuga în alte locații din WordPress.

Adăugarea butoanelor disponibile

WordPress folosește câteva opțiuni disponibile în TinyMCE pentru a dezactiva anumite butoane - cum ar fi superscript, indiciu și reguli orizontale - pentru a curăța interfața. Ele pot fi adăugate înapoi fără prea multă agitație.

Primul pas este crearea unui plugin. Uitați-vă la codul WordPress despre cum să faceți acest lucru. Pe scurt, puteți crea un folder numit "my-mce-plugin" în folderul wp-content / plugins. Creați un fișier cu același nume, cu o extensie PHP: mi-plugin.php-ban.

În fișierul respectiv, lipiți următoarele:

  
După ce ați terminat, ar trebui să puteți selecta acest plugin în WordPress și să-l activați. Tot codul de acum încolo poate fi inserat în acest fișier.
 
Deci, înapoi la permițând unele butoane ascunse dar ascunse. Iată codul care ne permite să activați cele 3 butoane pe care le-am menționat:
 
 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); funcția my_tinymce_buttons ($ butoane) $ buttons [] = 'superscript'; $ butoanele [] = 'indicele'; butoanele $ [] = hr; returnați butoanele $;  
 
 
 
Pentru a afla care butoane pot fi adăugate și ce sunt numite, consultați lista din documentația TinyMCE pentru controale.
 
Crearea propriilor butoane
 
Ce zici de crearea propriilor butoane de la zero? Multe site-uri utilizează Prism pentru evidențierea codului, care utilizează o abordare foarte semantică pentru marcarea segmentelor de cod. Trebuie să îți împachetezi codul înăuntru  și 
 tag-uri, ceva de genul:
 
$ variable = 'valoare'
 
Să creăm un buton care va face acest lucru pentru noi!
 
Acesta este un proces în trei pași. Va trebui să adăugați un buton, să încărcați un fișier javascript și de fapt să scrieți conținutul fișierului Javascript. Să începem!
 
Adăugarea butonului și încărcarea fișierului Javascript este destul de simplă, iată codul pe care l-am obișnuit:
 
 add_filter ('mce_buttons', 'pre_code_add_button'); funcția pre_code_add_button (butoane $) $ buttons [] = 'pre_code_button'; returnați butoanele $;  add_filter ('mce_external_plugins', 'pre_code_add_javascript'); funcția pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri (). '/Tinymce-plugin.js'; retur $ plugin_array;  
 
Când văd tutoriale despre asta, văd frecvent două probleme.
 
Ei neglijează să menționeze acest lucru numele butonului adăugat în funcția pre_code_add_button () trebuie să fie identic cu tasta pentru variabila $ plugin_array din funcția pre_code_add_javascript (). Vom avea nevoie, de asemenea utilizați același șir în Javascriptul nostru mai târziu.
 
Unele tutoriale, de asemenea utilizați un cârlig adițional pentru a încheia totul. În timp ce acest lucru va funcționa, nu este necesar și deoarece Codex-ul nu-l folosește, ar trebui probabil să fie evitat.
 
Următorul pas este să scriem un Javascript pentru a implementa funcționalitatea noastră. Iată ce obișnuisem să obțin 
 și  tag-uri de ieșire toate la o dată.
 
 (funcția () tinymce.PluginManager.add ('pre_code_button', funcție (editor, url) editor.addButton ('pre_code_button' tinyMCE.activeEditor.selection.getContent (); var content = '
'+ select +'
„; editor.insertContent (conținut + "\ n"); ); ); ) (); 
 
Cele mai multe dintre acestea sunt dictate de modul în care un plugin TinyMCE ar trebui să fie codificat, puteți găsi informații despre acest lucru în documentația TinyMCE. Pentru moment, tot ce trebuie să știți este asta numele butonului (Pre_code_button) ar trebui să fie utilizate în rândul 2 și 3. Valoarea textului din rândul 4 va fi afișată dacă nu utilizați o pictogramă (vom examina adăugarea de pictograme într-un moment).
 
Metoda onclick dictează ce face acest buton atunci când este făcut clic. Vreau să o folosesc pentru a împacheta textul selectat în structura HTML discutată mai devreme.
 
Textul selectat poate fi capturat folosind tinyMCE.activeEditor.selection.getContent (). Apoi, înfășoară elementele din jurul ei și le introduc, înlocuind conținutul evidențiat cu noul element. Am adăugat, de asemenea, o linie nouă pentru a putea începe cu ușurință scrierea după elementul de cod.
 
Dacă doriți să utilizați o pictogramă, vă sugerăm să selectați una din setul Dashicons care se livrează cu WordPress. Referința dezvoltatorilor are un instrument excelent pentru găsirea icoanelor și pentru CSS / HTML / Glyph. Găsiți simbolul de cod și notați unicodul de dedesubt: f475.
 
Va trebui să atașăm o foaie de stil pluginului nostru și apoi să adăugăm un stil simplu pentru a afișa pictograma noastră. În primul rând, să adăugăm stilul nostru WordPress:
 
 add_action ('admin_enqueue_scripts', 'pre_code_styles'); funcția pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 
Reveniți la Javascript și lângă pictograma din funcția addButton, înlocuiți-o “fals” cu o clasă pe care ați dori să o aveți - am folosit-o pre_code_button.
 
Acum creați fișierul style.css din directorul plugin și adăugați următoarea CSS:
 
 i.mce-i-pre_code_button: înainte de font-family: dashicons; conținut: "\ f475";  
 
 
 
Rețineți că butonul va primi mce-i- [clasa ta aici] clasa pe care o puteți utiliza pentru a viza și a adăuga stiluri. Specificați fontul ca dashicons și conținutul utilizând valoarea unicode de mai devreme.
 
Utilizarea TinyMCE În altă parte
 
Pluginurile creează adesea textarea pentru introducerea textului mai lung, nu ar fi minunat dacă am putea folosi și TinyMCE acolo? Bineînțeles că putem, și este destul de ușor. Funcția wp_editor () ne permite să ieșim oriunde în administrație, iată cum arată:
 
wp_editor ($ initial_content, $ element_id, $ setări);
 
Primul parametru stabilește conținutul inițial pentru casetă. Acest lucru ar putea fi folosit pentru a încărca o opțiune din baza de date, de exemplu. Al doilea parametru stabilește ID-ul elementului HTML. Al treilea parametru este o serie de setări. Pentru a citi despre setările exacte pe care le puteți utiliza, aruncați o privire la documentația editorului wp.
 
Cea mai importantă setare este textarea_name. Aceasta numește atributul de nume al elementului textarea, permițându-vă să salvați cu ușurință datele. Iată cum arată editorul meu când este folosit într-o pagină de opțiuni:
 
$ setări = array ('textarea_name' => 'buyer_bio');
 
wp_editor (get_option ('buyer_bio'), 'buyer_bio', $ setări);
 
Acest lucru este echivalent cu scrierea următorului cod, care ar avea ca rezultat o textare simplă:
 
<?php get_option( 'buyer_bio' ) ?>
 
Concluzie
 
Editorul TinyMCE este un mod ușor de utilizat pentru a permite utilizatorilor mai multă flexibilitate la introducerea conținutului. Permite celor care nu doresc să-și formuleze conținutul doar pentru a-l scrie și a fi terminat cu aceștia, iar cei care doresc să se ocupe cu ea pentru a-și petrece cât mai mult timp pe cât au nevoie să o obțină.
 
Crearea de noi butoane și funcționalități se poate face într-un mod modular și tocmai am zgâriat suprafața posibilităților. Dacă știți despre un plugin TinyMCE deosebit de bun sau despre cazul care v-a ajutat foarte mult, spuneți-ne în comentariile de mai jos!