Brug af TinyMCE Editor i WordPress [Guide]

Selvom de måske ikke kender navnet, er alle, der bruger WordPress, bekendt med TinyMCE editor. Det er den editor, du bruger, når du opretter eller redigerer dit indhold - den med knapperne til oprettelse af fed tekst, overskrifter, tekstjustering og så videre er. Det er hvad vi vil se på i dette indlæg, og jeg skal vise dig hvordan du kan tilføje funktionalitet og hvordan du kan bruge det i dine plugins.

Redaktøren er bygget på et platformuafhængigt Javascript-system kaldet TinyMCE, som bruges i en række projekter på internettet. Den har en stor API, som WordPress giver dig mulighed for at indtaste for at oprette dine egne knapper og tilføje den til andre steder inden for WordPress.

Tilføjelse af tilgængelige knapper

WordPress bruger nogle muligheder til rådighed i TinyMCE for at deaktivere bestemte knapper - f.eks. Superskript, abonnement og horisontale regler - for at rydde op i grænsefladen. De kan tilføjes tilbage uden for meget besvær.

Det første skridt er at oprette et plugin. Tag et kig på WordPress codex om, hvordan du gør det. I en nøddeskal kan du komme videre med at oprette en mappe med navnet 'my-mce-plugin' i mappen wp-content / plugins. Opret en fil med samme navn, med en PHP-udvidelse: min-MCE-plugin.php.

Indsæt den fil, indsæt følgende:

Når du er færdig, skal du kunne vælge dette plugin i WordPress og aktivere det. Al koden fra nu af kan indsættes i denne fil.

Så tilbage til muliggør nogle indbyggede men skjulte knapper. Her er koden, der giver os mulighed for at aktivere de 3 knapper jeg nævnte:

 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); funktion my_tinymce_buttons ($ buttons) $ buttons [] = 'superscript'; $ knapper [] = 'subscript'; $ knapper [] = hr; returner $ knapper;

For at vide, hvilke knapper der kan tilføjes, og hvad de kaldes, skal du se på listen i TinyMCE-dokumentationen til kontrol.

Oprettelse af vores egne knapper

Hvad med at lave vores egne knapper fra bunden? Mange hjemmesider bruger Prism til kodelampe, som bruger en meget semantisk tilgang til markering af kodesegmenter. Du skal indpakke din kode indenfor og

 tags, noget som dette:
 $ variable = 'value'
 Lad os oprette en knap, som vil gøre det for os!
 Dette er en tre-trins proces. Du skal tilføje en knap, indlæse en javascript-fil og faktisk skrive indholdet af Javascript-filen. Lad os komme igang!
 Tilføjelse af knappen og indlæsning af Javascript-filen er ret ligetil, her er koden, jeg plejede at få det gjort:
  add_filter ('mce_buttons', 'pre_code_add_button'); funktion pre_code_add_button ($ knapper) $ knapper [] = 'pre_code_button'; returner $ knapper;  add_filter ('mce_external_plugins', 'pre_code_add_javascript'); funktion 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 vejledninger om dette, ser jeg ofte 2 problemer.
 De undlader at nævne det Knappens navn, der er tilføjet i funktionen pre_code_add_button (), skal være det samme som nøglen for $ plugin_array-variablen i funktionen pre_code_add_javascript (). Vi skal også brug samme streng i vores Javascript senere.
 Nogle tutorials også brug en ekstra admin_head hook til at pakke alt sammen. Selvom dette vil fungere, er det ikke nødvendigt, og da Codex ikke bruger det, bør det nok undgås.
 Det næste trin er at skrive nogle Javascript til at implementere vores funktionalitet. Her er hvad jeg plejede at få 
 og  tags udsender alle på én gang.
  (funktion () tinymce.PluginManager.add ('pre_code_button', funktion (editor, url) editor.addButton ('pre_code_button', text: 'Prism', ikon: falsk, onclick: function () var selected = tinyMCE.activeEditor.selection.getContent (); var content = ''+ valgt +'
'; editor.insertContent (indhold + "\ n"); ); ); ) (); 
 Det meste af dette er dikteret af, hvordan et TinyMCE-plugin skal kodes, du kan finde nogle oplysninger om det i TinyMCE-dokumentationen. For nu er alt, hvad du behøver at vide, det navnet på din knap (Pre_code_button) skal anvendes i linje 2 og 3. Værdien af "tekst" i linje 4 vises, hvis du ikke bruger et ikon (vi tager et kig på at tilføje ikoner om et øjeblik).
 Onclick-metoden dikterer, hvad denne knap gør, når den klikkes. Jeg vil bruge den til at indpakke valgt tekst i den hidtidige HTML-struktur.
 Den valgte tekst kan tages fat i tinyMCE.activeEditor.selection.getContent (). Derefter pakker jeg elementerne rundt om det og indsætter det, og erstatter det fremhævede indhold med det nye element. Jeg har også tilføjet en ny linje, så jeg kan nemt begynde at skrive efter kodeelementet.
 Hvis du vil bruge et ikon, foreslår jeg at vælge en fra Dashicons-sæt, som sendes med WordPress. Developer Reference er et godt værktøj til at finde ikoner og deres CSS / HTML / Glyph. Find kodesymbolet og noter unicode nedenunder det: f475.
 Vi skal vedhæfte et stylesheet til vores plugin og derefter tilføje en simpel stil til at vise vores ikon. Først op, lad os tilføje vores stil til WordPress:
  add_action ('admin_enqueue_scripts', 'pre_code_styles'); funktion pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 Gå tilbage til Javascript og ved siden af ikonet i addButton-funktionen, udskift “falsk” med en klasse vil du gerne have din knap til at have - jeg brugte pre_code_button.
 Opret nu style.css-filen i din plugin-mappe og tilføj følgende CSS:
  i.mce-i-pre_code_button: før font-family: dashicons; indhold: "\ f475";  
  
 Bemærk at knappen vil modtage mce-i- [din klasse her] klasse, som du kan bruge til at målrette og tilføje stilarter. Angiv skrifttypen som dashicons og indholdet ved hjælp af unicode-værdien fra tidligere.
 Brug af TinyMCE andre steder
 Plugins skaber ofte tekstområder for indtastning af længere tekst, ville det ikke være godt, hvis vi også kunne bruge TinyMCE der? Selvfølgelig kan vi, og det er ret nemt. Funktionen wp_editor () giver os mulighed for at sende et sted overalt i admin, sådan ser det ud:
 wp_editor ($ initial_content, $ element_id, $ indstillinger);
 Den første parameter angiver det indledende indhold for boksen. Det kan f.eks. Bruges til at indlæse en indstilling fra databasen. Den anden parameter angiver HTML-elementets ID. Den tredje parameter er en række indstillinger. For at læse om de nøjagtige indstillinger, du kan bruge, skal du kigge på wp-editorens dokumentation.
 Den vigtigste indstilling er textarea_name. Dette fylder navnet attributten af textarea elementet, så du nemt kan gemme dataene. Sådan ser min editor ud, når den bruges på en optionsside:
 $ settings = array ('textarea_name' => 'buyer_bio');
 wp_editor (get_option ('buyer_bio'), 'buyer_bio', $ indstillinger);
 Dette svarer til at skrive følgende kode, hvilket ville resultere i en simpel tekstområde:
 <?php get_option( 'buyer_bio' ) ?>
 Konklusion
 TinyMCE-editoren er en brugervenlig måde at give brugerne større fleksibilitet, når de indtaster indhold. Det tillader dem, der ikke ønsker at formatere deres indhold til bare at skrive det op og blive færdige med det, og dem der ønsker at snuble rundt med det for at bruge så meget tid som de har brug for at få det bare rigtigt.
 Oprettelse af nye knapper og funktionalitet kan gøres på en meget modulær måde, og vi har kun lige ridset overfladen af mulighederne. Hvis du kender til en særlig god TinyMCE-plugin eller brugs sag, som har hjulpet dig meget, så lad os det vide i kommentarerne nedenfor!