Bruke TinyMCE Editor i WordPress [Guide]

Selv om de kanskje ikke vet navnet sitt, er alle som bruker WordPress, kjent med TinyMCE editor. Det er redaktøren du bruker når du lager eller rediger innholdet ditt - den med knappene for å lage fet tekst, overskrifter, tekstjustering og så videre er. Det er det vi skal se på i dette innlegget, og jeg skal vise deg hvordan du kan legge til funksjonalitet og hvordan du kan bruke den i pluginene dine.

Redaktøren er bygget på et plattformuavhengig Javascript-system kalt TinyMCE som brukes i en rekke prosjekter på nettet. Den har en flott API som WordPress lar deg tappe inn for å lage dine egne knapper og legge den til andre steder i WordPress.

Legge til tilgjengelige knapper

WordPress bruker noen tilgjengelige alternativer i TinyMCE for å deaktivere bestemte knapper - for eksempel overskrift, abonnement og horisontale regler - for å rydde opp grensesnittet. De kan legges tilbake uten for mye oppstyr.

Det første trinnet er å lage et plugin. Ta en titt på WordPress-kodeksen på hvordan du gjør det. I et nøtteskall kan du komme deg videre med å opprette en mappe som heter 'my-mce-plugin' i wp-content / plugins-mappen. Opprett en fil med samme navn, med en PHP-utvidelse: my-MCE-plugin.php.

Inni den filen limer inn følgende:

Når du er ferdig, bør du kunne velge dette pluginet i WordPress og aktivere det. Alt koden fra nå av kan limes inn i denne filen.

Så, tilbake til muliggjør noen innebygde men skjulte knapper. Her er koden som lar oss aktivere de 3 knappene jeg nevnte:

 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); funksjon my_tinymce_buttons ($ knapper) $ knapper [] = 'superscript'; $ knapper [] = 'abonnement'; $ knapper [] = hr; returner $ knapper;

For å vite hvilke knapper som kan legges til og hva de kalles, ta en titt på listen som er funnet i TinyMCE-dokumentasjonen for kontroller.

Opprette våre egne knapper

Hva med å lage våre egne knapper fra bunnen av? Mange nettsteder bruker Prism for kodeutheving som bruker en meget semantisk tilnærming til å markere opp kodesegmenter. Du må pakke inn koden din i og

 koder, noe som dette:
 $ variable = 'value'
 La oss lage en knapp som vil gjøre dette for oss!
 Dette er en tre-trinns prosess. Du må legge til en knapp, laste inn en javascriptfil og faktisk skrive innholdet i Javascript-filen. La oss komme i gang!
 Å legge til knappen og laste Javascript-filen er ganske enkel, her er koden jeg pleide å gjøre det gjort:
  add_filter ('mce_buttons', 'pre_code_add_button'); funksjon pre_code_add_button ($ knapper) $ knapper [] = 'pre_code_button'; returner $ knapper;  add_filter ('mce_external_plugins', 'pre_code_add_javascript'); funksjon pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri (). '/Tinymce-plugin.js'; returner $ plugin_array;  
 Når jeg ser opplæringsprogrammer om dette, ser jeg ofte 2 problemer.
 De forsømmer å nevne det knappens navn lagt til i pre_code_add_button () -funksjonen må være det samme som nøkkelen for $ plugin_array-variabelen i funksjonen pre_code_add_javascript (). Vi må også bruk samme streng i vårt Javascript senere.
 Noen opplæringsprogrammer også bruk en ekstra admin_head krok for å pakke alt opp. Selv om dette vil fungere, er det ikke nødvendig, og siden Codex ikke bruker det, bør det sannsynligvis unngås.
 Det neste trinnet er å skrive litt Javascript for å implementere vår funksjonalitet. Her er hva jeg pleide å få 
 og  Tagger utdata alle samtidig.
  (funksjon () tinymce.PluginManager.add ('pre_code_button', funksjon (editor, url) editor.addButton ('pre_code_button', text: 'Prism', ikon: false, onclick: function () var selected = tinyMCE.activeEditor.selection.getContent (); var content = ''+ valgt +'
'; editor.insertContent (innhold + "\ n"); ); ); ) (); 
 Det meste av dette er diktert av hvordan et TinyMCE-plugin skal kodes, du kan finne litt informasjon om det i TinyMCE-dokumentasjonen. For nå er alt du trenger å vite det navnet på knappen din (Pre_code_button) skal brukes i linje 2 og 3. Verdien av "tekst" i linje 4 vises hvis du ikke bruker et ikon (vi vil se på å legge til ikoner på et øyeblikk).
 Onclick-metoden dikterer hva denne knappen gjør når den klikkes. Jeg vil bruke den til å pakke inn valgt tekst i HTML-strukturen diskutert tidligere.
 Den valgte teksten kan bli tatt i bruk tinyMCE.activeEditor.selection.getContent (). Deretter vikler jeg elementene rundt det og setter det inn, erstatter det uthevede innholdet med det nye elementet. Jeg har også lagt til en ny linje slik at jeg lett kan begynne å skrive etter kodeelementet.
 Hvis du vil bruke et ikon foreslår jeg å velge en fra Dashicons-settet som leveres med WordPress. Utviklerreferansen har et flott verktøy for å finne ikoner og deres CSS / HTML / Glyph. Finn kodesymbolet og noter unicode under det: f475.
 Vi må legge ved et stilark til vårt plugin og deretter legge til en enkel stil for å vise vårt ikon. Først opp, la oss legge til stilen vår til WordPress:
  add_action ('admin_enqueue_scripts', 'pre_code_styles'); funksjon pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 Gå tilbake til Javascript og ved siden av ikonet i addButton-funksjonen, erstatt “falsk” med en klasse vil du at knappen din skal ha - jeg brukte pre_code_button.
 Opprett nå style.css-filen i plugin-katalogen din, og legg til følgende CSS:
  i.mce-i-pre_code_button: før font-family: dashicons; innhold: "\ f475";  
  
 Merk at knappen vil motta mce-i- [din klasse her] klasse som du kan bruke til å målrette og legge til stiler. Angi skriften som dashicons og innholdet med unicode-verdien fra tidligere.
 Bruke TinyMCE andre steder
 Plugins lager ofte tekstområder for å skrive inn lengre tekst, ville det ikke vært bra om vi også kunne bruke TinyMCE der? Selvfølgelig kan vi, og det er ganske enkelt. Funksjonen wp_editor () gjør det mulig for oss å skrive ut hvor som helst i admin, slik ser det ut:
 wp_editor ($ initial_content, $ element_id, $ innstillinger);
 Den første parameteren angir det innledende innholdet for boksen. Dette kan brukes til å laste inn et alternativ fra databasen, for eksempel. Den andre parameteren angir HTML-elementets ID. Den tredje parameteren er en rekke innstillinger. For å lese om de nøyaktige innstillingene du kan bruke, ta en titt på wp-editorens dokumentasjon.
 Den viktigste innstillingen er textarea_name. Dette fyller navnetattributtet til textarea-elementet, slik at du enkelt kan lagre dataene. Slik ser editoren ut når den brukes på en tilleggsside:
 $ settings = array ('textarea_name' => 'buyer_bio');
 wp_editor (get_option ('buyer_bio'), 'buyer_bio', $ innstillinger);
 Dette tilsvarer å skrive følgende kode, som vil resultere i en enkel tekstområde:
 <?php get_option( 'buyer_bio' ) ?>
 Konklusjon
 TinyMCE-editoren er en brukervennlig måte å gi brukerne mer fleksibilitet når de skriver inn innhold. Det tillater de som ikke ønsker å formatere innholdet sitt for å bare skrive det opp og bli ferdig med det, og de som vil snike seg med det å bruke så mye tid som de trenger å få det akkurat.
 Å skape nye knapper og funksjonalitet kan gjøres på en veldig modulær måte, og vi har bare bare skrapet overflaten av mulighetene. Hvis du vet om en spesielt god TinyMCE-plugin eller bruk et tilfelle som har hjulpet deg mye, så gi oss beskjed i kommentarene nedenfor.!