Använda TinyMCE Editor i WordPress [Guide]

Även om de kanske inte vet sitt namn är alla som använder WordPress bekanta med TinyMCE editor. Det är den redaktör du använder när du skapar eller redigerar ditt innehåll - den med knapparna för att skapa fet text, rubriker, textjustering och så vidare är. Det är vad vi ska titta på i det här inlägget, och jag ska visa dig hur du kan lägga till funktionalitet och hur du kan använda den i dina pluginprogram.

Redaktören är uppbyggd på ett plattformoberoende Javascript-system som heter TinyMCE som används i ett antal projekt på webben. Den har ett bra API som WordPress gör att du kan använda för att skapa egna knappar och lägga till den till andra platser inom WordPress.

Lägga till tillgängliga knappar

WordPress använder vissa alternativ som finns tillgängliga i TinyMCE för att inaktivera vissa knappar - som superscript, subscript och horizontal rules - för att rengöra gränssnittet. De kan läggas tillbaka utan för mycket väsen.

Det första steget är att skapa ett plugin. Ta en titt på WordPress codex om hur du gör det. I ett nötskal kan du gå vidare med att skapa en mapp med namnet "my-mce-plugin" i mappen wp-content / plugins. Skapa en fil med samma namn, med en PHP-förlängning: my-MCE-plugin.php.

Inuti den filen klistra in följande:

När du är klar ska du kunna välja det här pluginet i WordPress och aktivera det. Alla koden från och med nu kan klistras in i den här filen.

Så tillbaka till möjliggör vissa inbyggda men dolda knappar. Här är koden som tillåter oss att aktivera de 3 knappar jag nämnde:

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

För att veta vilka knappar som kan läggas till och vad de kallas, ta en titt på listan i TinyMCE-dokumentationen för kontroller.

Skapa egna knappar

Vad sägs om att skapa egna knappar från början? Många webbplatser använder prism för kodmarkering som använder en mycket semantisk metod för att markera kodsegment. Du måste sätta in din kod inom och

 taggar, något liknande så här:
 $ variable = 'value'
 Låt oss skapa en knapp som kommer att göra detta för oss!
 Detta är en trestegsprocess. Du måste lägga till en knapp, ladda en javascriptfil och faktiskt skriva innehållet i Javascript-filen. Låt oss börja!
 Lägga till knappen och ladda Javascript-filen är ganska enkel, här är koden som jag brukade göra det gjort:
  add_filter ('mce_buttons', 'pre_code_add_button'); funktion pre_code_add_button ($ knappar) $ buttons [] = 'pre_code_button'; returnera $ knappar;  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'; returnera $ plugin_array;  
 När jag ser handledning om detta ser jag ofta 2 problem.
 De försummar att nämna det knappnamnet som läggs till i funktionen pre_code_add_button () måste vara detsamma som nyckeln för $ plugin_array-variabeln i funktionen pre_code_add_javascript (). Vi kommer också behöva använd samma sträng i vår Javascript senare.
 Några handledning också använd en extra admin_head krok för att pakka upp allt. Även om detta kommer att fungera är det inte nödvändigt och eftersom Codex inte använder det, borde det förmodligen undvikas.
 Nästa steg är att skriva några JavaScript för att implementera vår funktionalitet. Här är vad jag brukade få 
 och  taggarna matas ut på en gång.
  (funktion () tinymce.PluginManager.add ('pre_code_button', funktion (editor, url) editor.addButton ('pre_code_button', text: 'Prism', ikon: false, onclick: function () var selected = tinyMCE.activeEditor.selection.getContent (); var content = ''+ valda +'
'; editor.insertContent (innehåll + "\ n"); ); ); ) (); 
 Det mesta av detta dikteras av hur ett TinyMCE-plugin ska kodas. Du kan hitta lite information om det i TinyMCE-dokumentationen. För nu är allt du behöver veta det namnet på din knapp (Pre_code_button) ska användas i rad 2 och 3. Värdet på "text" i rad 4 visas om du inte använder en ikon (vi tar en titt på att lägga till ikoner på ett ögonblick).
 Onclick-metoden dikterar vad den här knappen gör när den klickas. Jag vill använda den för att pakka ut vald text i den HTML-struktur som diskuterats tidigare.
 Den valda texten kan fångas med tinyMCE.activeEditor.selection.getContent (). Sedan sätter jag in elementen runt den och lägger in den, ersätter det markerade innehållet med det nya elementet. Jag har också lagt till en ny rad så att jag lätt kan börja skriva efter kodelementet.
 Om du vill använda en ikon föreslår jag att du väljer en från Dashicons-uppsättningen som skickas med WordPress. Utvecklarreferensen har ett bra verktyg för att hitta ikoner och deras CSS / HTML / Glyph. Hitta kodsymbolen och notera unicode under den: f475.
 Vi måste bifoga ett stilark till vårt plugin och sedan lägga till en enkel stil för att visa vår ikon. Först upp, låt oss lägga till vår stil till 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å tillbaka till Javascript och bredvid ikonen i addButton-funktionen, byt ut “falsk” med en klass som du vill att din knapp ska ha - jag använde pre_code_button.
 Skapa nu style.css-filen i din plugin-katalog och lägg till följande CSS:
  i.mce-i-pre_code_button: före font-family: dashicons; innehåll: "\ f475";  
  
 Observera att knappen kommer att ta emot mce-i- [din klass här] klass som du kan använda för att rikta och lägga till stilar. Ange teckensnittet som dashicons och innehållet med unicode-värdet från tidigare.
 Använda TinyMCE någon annanstans
 Plugins skapar ofta textområden för att skriva in längre text, skulle det inte vara bra om vi också kunde använda TinyMCE där? Självklart kan vi, och det är ganska enkelt. Funktionen wp_editor () tillåter oss att mata ut var som helst i admin, så här ser det ut:
 wp_editor ($ initial_content, $ element_id, $ inställningar);
 Den första parametern anger det ursprungliga innehållet för rutan. Detta kan användas för att ladda ett alternativ från databasen, till exempel. Den andra parametern anger HTML-elementets ID. Den tredje parametern är en rad inställningar. För att läsa om de exakta inställningarna du kan använda, ta en titt på wp-redigeringsdokumentationen.
 Den viktigaste inställningen är textarea_name. Detta fyller namnet attributet i textarea-elementet, så att du enkelt kan spara data. Så här ser min redaktör ut när den används på en alternativ sida:
 $ settings = array ('textarea_name' => 'buyer_bio');
 wp_editor (get_option ('buyer_bio'), 'buyer_bio', $ inställningar);
 Detta motsvarar att du skriver följande kod, vilket skulle resultera i en enkel textarea:
 <?php get_option( 'buyer_bio' ) ?>
 Slutsats
 TinyMCE-redigeraren är ett användarvänligt sätt att tillåta användarna mer flexibilitet när de skriver in innehåll. Det gör det möjligt för dem som inte vill formatera sitt innehåll för att bara skriva in det och bli gjort med det, och de som vill fitta med det att spendera så mycket tid som de behöver få det bara rätt.
 Att skapa nya knappar och funktionalitet kan göras på ett väldigt modulärt sätt, och vi har bara bara repat på möjligheterna. Om du känner till ett särskilt bra TinyMCE-plugin eller använd ett fall som har hjälpt dig mycket, låt oss veta i kommentarerna nedan!