Naudojant „TinyMCE“ redaktorių „WordPress“ [Vadovas]

Nors jie negali žinoti jo pavadinimo, visi, kurie naudojasi „WordPress“, yra susipažinę su TinyMCE redaktorius. Tai redaktorius, kurį naudojate kurdami ar redaguodami turinį - tai yra mygtukai, skirti kurti drąsią tekstą, antraštes, teksto derinimą ir pan. Štai ką mes pažvelgsime į šį pranešimą, ir aš jums parodysiu kaip galite pridėti funkcionalumą ir kaip galite jį naudoti savo įskiepiuose.

Redaktorius yra pastatytas ant platformos nepriklausomo „JavaScript“ sistemos, vadinamos „TinyMCE“, kuri naudojama daugelyje projektų internete. Ji turi puikią API, kurią „WordPress“ leidžia naudoti, norėdami sukurti savo mygtukus ir pridėti ją į kitas „WordPress“ vietas.

Galimų mygtukų pridėjimas

„WordPress“ naudoja kai kurias parinktis, esančias „TinyMCE“, kad išjungtų konkrečius mygtukus, pvz., Viršraštį, indeksą ir horizontalias taisykles, kad būtų išvalyta sąsaja. Jie gali būti pridėti atgal be pernelyg didelio triukšmo.

Pirmas žingsnis yra sukurti papildinį. Pažvelkite į WordPress kodą, kaip tai padaryti. Trumpai tariant, galite sukurti aplanką, pavadintą „my-mce-plugin“, aplanke wp-content / plugins. Sukurkite tą patį pavadinimą turintį failą su PHP plėtiniu: my-mce-plugin.php.

Šiame faile įklijuokite:

Kai tai atliksite, turėtumėte turėti galimybę pasirinkti šį įskiepį „WordPress“ ir įjungti jį. Nuo šiol visas kodas gali būti įklijuotas šiame faile.

Taigi, atgal įgalinti kai kuriuos įmontuotus, bet paslėptus mygtukus. Štai kodas, leidžiantis įgalinti 3 minėtus mygtukus:

 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); funkcija my_tinymce_buttons ($ mygtukai) $ mygtukai [] = „viršutinis indeksas“; $ mygtukai [] = 'indeksas'; $ mygtukai [] = hr; grąžinti $ mygtukus;

Norėdami sužinoti, kuriuos mygtukus galima pridėti ir ką jie vadinami, pažiūrėkite į sąrašą, kurį rasite TinyMCE dokumentuose.

Savo mygtukų kūrimas

Kaip sukurti savo mygtukus nuo nulio? Daugeliui svetainių kodams paryškinti naudojamas „Prism“, kuris naudoja labai semantinį kodo segmentų žymėjimą. Turite įvesti savo kodą ir

 žymės, kažkas panašaus:
 $ változiklis = 'vertė'
 Sukursime mygtuką, kuris tai padarys mums!
 Tai yra trijų etapų procesas. Jums reikės pridėti mygtuką, įkelti „JavaScript“ failą ir faktiškai parašyti „Javascript“ failo turinį. Pradėkime!
 Mygtuko pridėjimas ir „JavaScript“ failo įkėlimas yra gana paprastas.
  add_filter ('mce_buttons', 'pre_code_add_button'); funkcija pre_code_add_button ($ mygtukai) $ mygtukai [] = 'pre_code_button'; grąžinti $ mygtukus;  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“; grąžinti $ plugin_array;  
 Kai matau pamokas apie tai, dažnai pastebiu 2 problemas.
 Jie tai nepaminėja mygtuko pavadinimas, pridedamas prie pre_code_add_button () funkcijos, turi būti toks pat kaip $ plugin_array kintamojo raktas pre_code_add_javascript () funkcijoje. Mums taip pat reikės naudoti tą pačią eilutę mūsų „Javascript“ vėliau.
 Kai kurie vadovėliai taip pat naudokite papildomą admin_head kablys, kad viską apvyniotų. Nors tai bus naudinga, ji nereikalinga ir, kadangi Codex jo nenaudoja, tai tikriausiai turėtų būti vengiama.
 Kitas žingsnis yra parašyti keletą „Javascript“, kad galėtume įgyvendinti mūsų funkcionalumą. Štai ką aš naudoju 
 ir  žymės iš karto iš karto.
  (funkcija () tinymce.PluginManager.add ('pre_code_button', funkcija (redaktorius, url) editor.addButton ('pre_code_button', text: 'Prism', piktograma: false, onclick: function () var selected = tinyMCE.activeEditor.selection.getContent (); var content = '„+ pasirinktas +“
„; editor.insertContent (turinys + "n"); ); ); ) (); 
 Daugiausia tai lemia tai, kaip TinyMCE įskiepiai turėtų būti koduojami, galite rasti informacijos apie tai TinyMCE dokumentuose. Šiuo metu viskas, ką jums reikia žinoti, yra tai mygtuko pavadinimas (pre_code_button) turėtų būti naudojami 2 ir 3 eilutėse. „Teksto“ reikšmė 4 eilutėje bus rodoma, jei nenaudosite piktogramos (peržiūrėsime piktogramas per minutę).
 „Onclick“ metodas diktuoja tai, ką šis mygtukas veikia spustelėjus. Norėčiau jį naudoti norint įterpti pasirinktą tekstą į anksčiau aptartą HTML struktūrą.
 Pasirinktą tekstą galima užfiksuoti naudojant tinyMCE.activeEditor.selection.getContent (). Tada aš apvyniu aplink jį esančius elementus ir įterpsiu jį, pakeičiant pažymėtą turinį nauju elementu. Aš taip pat pridėjau naują eilutę, kad galėčiau lengvai pradėti rašyti po kodo elemento.
 Jei norite naudoti piktogramą, siūlau pasirinkti vieną iš „Dashicons“ rinkinio, kuris siunčiamas su „WordPress“. Kūrėjo nuoroda yra puiki priemonė ieškoti piktogramų ir jų CSS / HTML / Glyph. Suraskite kodo simbolį ir užrašykite po juo esantį unikodą: f475.
 Turėsime pridėti stiliaus lentelę prie mūsų įskiepio ir tada pridėkite paprastą stilių, kad būtų rodoma mūsų piktograma. Pirmiausia pridėkime savo stilių į „WordPress“:
  add_action ('admin_enqueue_scripts', 'pre_code_styles'); funkcija pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 Grįžkite į „Javascript“ ir šalia „addButton“ funkcijos piktogramos pakeiskite “klaidinga” su klase, kurią norėtumėte, kad jūsų mygtukas būtų - aš naudoju pre_code_button.
 Dabar sukurkite failą style.css į savo įskiepių katalogą ir pridėkite šį CSS:
  i.mce-i-pre_code_button: prieš font-family: dashicons; turinys: „f475“;  
  
 Atkreipkite dėmesį, kad mygtukas gaus mce-i- [jūsų klasė čia] klasę, kurią galite naudoti norėdami nukreipti ir pridėti stilių. Nurodykite šriftą kaip dashicons ir turinį, naudodami unikodo reikšmę, anksčiau.
 TinyMCE naudojimas kitur
 Įskiepiai dažnai sukuria teksto įrašus ilgesniam tekstui įvesti, ar ne būtų puiku, jei galėtume ten naudoti TinyMCE? Žinoma, galime, ir tai gana paprasta. „Wp_editor“ () funkcija leidžia mums vieną išvesties bet kurioje „admin“ vietoje, kaip atrodo:
 wp_editor ($ original_content, $ element_id, $ settings);
 Pirmasis parametras nustato pradinį lango turinį. Tai gali būti naudojama, pavyzdžiui, įkeliant parinktį iš duomenų bazės. Antrasis parametras nustato HTML elemento ID. Trečiasis parametras yra nustatymų masyvas. Jei norite skaityti tikslius nustatymus, kuriuos galite naudoti, pažiūrėkite į wp redaktoriaus dokumentus.
 Svarbiausias nustatymas yra textarea_name. Tai atitinka teksto elemento pavadinimo atributą, leidžiantį lengvai išsaugoti duomenis. Štai kaip mano redaktorius atrodo naudodamas parinkčių puslapyje:
 $ settings = masyvas ('textarea_name' => 'buyer_bio');
 wp_editor (get_option ('buyer_bio'), „buyer_bio“, $ nustatymai);
 Tai atitinka tokį kodą, kuris sudarytų paprastą tekstą:
 <?php get_option( 'buyer_bio' ) ?>
 Išvada
 „TinyMCE“ redaktorius yra patogus būdas vartotojams suteikti daugiau lankstumo įvedant turinį. Tai leidžia tiems, kurie nenori formatuoti savo turinio, tiesiog jį įvesti ir su juo atlikti, ir tuos, kurie nori su juo pasislėpti, kad praleistų tiek laiko, kiek jiems reikia, kad jis būtų teisingas.
 Naujų mygtukų ir funkcionalumo kūrimas gali būti atliekamas labai moduliniu būdu, ir tik ką tik subraižėme galimybių paviršių. Jei žinote ypač gerą „TinyMCE“ papildinį ar naudojimo atvejį, kuris padėjo jums daug, praneškite apie tai toliau pateiktose pastabose!