Korzystanie z edytora TinyMCE w WordPress [Przewodnik]

Chociaż mogą nie znać swojej nazwy, każdy, kto używa WordPressa, zna język Edytor TinyMCE. Jest to edytor, którego używasz podczas tworzenia lub edycji treści - ten z przyciskami do tworzenia pogrubionego tekstu, nagłówków, wyrównania tekstu i tak dalej. Oto, co przyjrzymy się temu postowi, i pokażę ci jak możesz dodać funkcjonalność i jak możesz go używać w swoich wtyczkach.

Edytor jest zbudowany na niezależnym od platformy systemie JavaScript o nazwie TinyMCE, który jest używany w wielu projektach w sieci. Ma świetny interfejs API, który WordPress pozwala na stuknięcie, aby utworzyć własne przyciski i dodać je do innych lokalizacji w WordPress.

Dodawanie dostępnych przycisków

WordPress korzysta z niektórych opcji dostępnych w TinyMCE, aby wyłączyć określone przyciski - takie jak indeks górny, indeks dolny i reguły poziome - w celu wyczyszczenia interfejsu. Można je dodawać bez zbytniego zamieszania.

Pierwszym krokiem jest stworzenie wtyczki. Spójrz na kodeks WordPress, jak to zrobić. W skrócie, możesz przejść do tworzenia folderu o nazwie „my-mce-plugin” w folderze wp-content / plugins. Utwórz plik o tej samej nazwie z rozszerzeniem PHP: my-mce-plugin.php.

W tym pliku wklej następujące elementy:

Po wykonaniu tej czynności powinieneś być w stanie wybrać tę wtyczkę w WordPressie i aktywować ją. Cały kod od teraz można wkleić do tego pliku.

Więc wróć do włączenie niektórych wbudowanych, ale ukrytych przycisków. Oto kod, który pozwala nam włączyć 3 przyciski, o których wspomniałem:

 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); funkcja my_tinymce_buttons ($ buttons) $ buttons [] = 'superscript'; $ buttons [] = 'indeks dolny'; $ buttons [] = hr; zwróć $ buttons;

Aby dowiedzieć się, które przyciski można dodać i jakie są wywoływane, spójrz na listę znajdującą się w dokumentacji TinyMCE dla formantów.

Tworzenie własnych przycisków

Co powiesz na tworzenie własnych przycisków od podstaw? Wiele stron internetowych używa Prism do podkreślania kodu, który wykorzystuje bardzo semantyczne podejście do oznaczania segmentów kodu. Musisz zawinąć swój kod wewnątrz i

 tagi, coś takiego:
 $ variable = 'value'
 Stwórzmy przycisk, który zrobi to za nas!
 Jest to proces trzystopniowy. Będziesz musiał dodać przycisk, załadować plik javascript i faktycznie napisać zawartość pliku Javascript. Zacznijmy!
 Dodanie przycisku i załadowanie pliku Javascript jest całkiem proste, oto kod, którego użyłem do zrobienia tego:
  add_filter ('mce_buttons', 'pre_code_add_button'); funkcja pre_code_add_button ($ buttons) $ buttons [] = 'pre_code_button'; zwróć $ buttons;  add_filter ('mce_external_plugins', 'pre_code_add_javascript'); funkcja pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri (). '/tinymce-plugin.js'; zwraca $ plugin_array;  
 Kiedy widzę tutoriale na ten temat, często widzę 2 problemy.
 Nie wspominają o tym nazwa przycisku dodana w funkcji pre_code_add_button () musi być taka sama jak klucz dla zmiennej $ plugin_array w funkcji pre_code_add_javascript (). Musimy także użyj tego samego ciągu w naszym Javascript później.
 Niektóre tutoriale użyj dodatkowego haka admin_head, aby wszystko zawinąć. Chociaż to zadziała, nie jest wymagane, a ponieważ Kodeks go nie używa, prawdopodobnie należy go unikać.
 Następnym krokiem jest napisanie Javascript w celu wdrożenia naszej funkcjonalności. Oto, co kiedyś otrzymałem 
 i  wszystkie tagi wyjściowe naraz.
  (function () tinymce.PluginManager.add ('pre_code_button', funkcja (edytor, url) editor.addButton ('pre_code_button', tekst: 'Prism', ikona: false, onclick: function () var selected = tinyMCE.activeEditor.selection.getContent (); var content = ''+ wybrany +'
'; editor.insertContent (content + "n"); ); ); ) (); 
 Większość z nich jest podyktowana tym, jak wtyczka TinyMCE ma być zakodowana, możesz znaleźć informacje na ten temat w dokumentacji TinyMCE. Na razie wszystko, co musisz wiedzieć, to to nazwa twojego przycisku (pre_code_button) należy użyć w wierszu 2 i 3. Wartość „tekstu” w wierszu 4 zostanie wyświetlona, jeśli nie korzystasz z ikony (zajmiemy się dodaniem ikon za chwilę).
 Metoda onclick określa, co robi ten przycisk po kliknięciu. Chcę go użyć do zawijania zaznaczonego tekstu w omówionej wcześniej strukturze HTML.
 Wybrany tekst można pobrać za pomocą tinyMCE.activeEditor.selection.getContent (). Następnie owijam elementy wokół i wstawiam, zastępując podświetloną treść nowym elementem. Dodałem także nową linię, dzięki czemu mogę łatwo zacząć pisać po elemencie kodu.
 Jeśli chcesz użyć ikony, proponuję wybrać jedną z zestawu Dashicons, który jest dostarczany z WordPress. Referencje dla programistów mają świetne narzędzie do wyszukiwania ikon i ich CSS / HTML / Glyph. Znajdź symbol kodu i zanotuj pod nim kod Unicode: f475.
 Musimy dołączyć arkusz stylów do naszej wtyczki, a następnie dodać prosty styl, aby wyświetlić naszą ikonę. Najpierw dodajmy nasz styl do WordPress:
  add_action ('admin_enqueue_scripts', 'pre_code_styles'); funkcja pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 Wróć do Javascript i obok ikony w funkcji addButton zastąp “fałszywy” z klasą, którą chciałbyś, aby twój przycisk miał - użyłem pre_code_button.
 Teraz utwórz plik style.css w katalogu wtyczek i dodaj następujący CSS:
  i.mce-i-pre_code_button: before font-family: dashicons; treść: „f475”;  
  
 Zauważ, że przycisk otrzyma mce-i- [twoja klasa tutaj] klasa, której możesz użyć do kierowania i dodawania stylów. Określ czcionkę jako dashicons, a zawartość używając wartości unicode z wcześniejszej.
 Korzystanie z TinyMCE w innym miejscu
 Wtyczki często tworzą pola tekstowe do wprowadzania dłuższego tekstu, czy nie byłoby wspaniale, gdybyśmy mogli również użyć TinyMCE? Oczywiście, że możemy i jest to całkiem proste. Funkcja wp_editor () pozwala nam wysyłać jeden w dowolnym miejscu w admin, oto jak wygląda:
 wp_editor ($ initial_content, $ element_id, $ settings);
 Pierwszy parametr ustawia początkową zawartość pola. Może to być wykorzystane na przykład do załadowania opcji z bazy danych. Drugi parametr ustawia identyfikator elementu HTML. Trzeci parametr to tablica ustawień. Aby zapoznać się z dokładnymi ustawieniami, których możesz użyć, zajrzyj do dokumentacji edytora wp.
 Najważniejszym ustawieniem jest nazwa_tekstu. Spełnia to atrybut name elementu textarea, umożliwiając łatwe zapisanie danych. Oto, jak mój edytor wygląda, gdy jest używany na stronie opcji:
 $ settings = array ('textarea_name' => 'buyer_bio');
 wp_editor (get_option ('buyer_bio'), 'buyer_bio', $ settings);
 Jest to równoznaczne z napisaniem następującego kodu, co skutkowałoby prostym tekstem:
 <?php get_option( 'buyer_bio' ) ?>
 Wniosek
 Edytor TinyMCE to przyjazny dla użytkownika sposób pozwalający użytkownikom na większą elastyczność podczas wprowadzania treści. Pozwala to tym, którzy nie chcą formatować swoich treści, po prostu je wpisać i skończyć z nimi, oraz tym, którzy chcą się z nimi bawić, by spędzić tyle czasu, ile potrzebują.
 Tworzenie nowych przycisków i funkcjonalności można wykonać w bardzo modułowy sposób, a my tylko zarysowaliśmy powierzchnię możliwości. Jeśli znasz szczególnie dobrą wtyczkę TinyMCE lub przypadek użycia, który bardzo ci pomógł, daj nam znać w komentarzach poniżej!