Jak utworzyć wtyczkę WordPress TinyMCE

Jeśli jesteś programistą WordPress, w pewnym momencie możesz natknąć się na dostosowywanie lub rozszerzanie edytora wizualnego WordPress. Na przykład możesz dodać Przycisk do paska narzędzi edytora wizualnego, aby umożliwić klientowi łatwe wstawianie pola tekstowego lub przycisku wywołania akcji bez pisania kodu HTML. W tym artykule pokażemy, jak utworzyć wtyczkę TinyMCE w WordPress.

Wymagania

Ten poradnik jest przeznaczony dla zaawansowanych użytkowników. Jeśli jesteś początkującym użytkownikiem, który po prostu chce rozszerzyć edytor wizualny, sprawdź wtyczkę TinyMCE Advanced lub spójrz na te wskazówki dotyczące korzystania z edytora wizualnego WordPress.

W tym samouczku będziesz potrzebował podstawowych umiejętności kodowania, dostępu do instalacji WordPress, gdzie możesz ją przetestować.

To zła praktyka, aby rozwijać wtyczki na żywo stronie internetowej. Drobny błąd w kodzie może sprawić, że Twoja strona będzie niedostępna. Ale jeśli musisz to zrobić na żywo, najpierw wykonaj kopię zapasową WordPress.

Tworzenie Pierwszej Wtyczki TinyMCE

Zaczniemy od stworzenia wtyczki WordPress, aby zarejestrować nasz niestandardowy przycisk paska narzędzi TinyMCE. Po kliknięciu ten przycisk pozwoli użytkownikowi dodać link z niestandardową klasą CSS.

Kod źródłowy zostanie dostarczony w całości na końcu tego artykułu, ale do tego czasu stwórzmy wtyczkę krok po kroku.

Najpierw musisz utworzyć katalog w wp-content / wtyczki folder Twojej instalacji WordPress. Nazwij ten folder tinymce-custom-link-class.

Stąd zaczniemy dodawać nasz kod wtyczki.

Nagłówek Wtyczki

Utwórz nowy plik w katalogu wtyczek, który właśnie stworzyliśmy i nazwij ten plik tinymce-custom-link-class.php. Dodaj ten kod do pliku i zapisz go.

/**
 * Nazwa Wtyczki: TinyMCE Custom Link Class
 * Plugin URI: http://wpbeginner.com
 * Wersja: 1.0
 * Autor: WPBeginner
 * Autor URI: https://www.wpbeginner.com
 * Opis: prosty Plugin TinyMCE do dodawania niestandardowej klasy łącza w edytorze wizualnym
 * Licencja: GPL2
 */

To jest tylko komentarz PHP, który mówi WordPress nazwę wtyczki, a także autora i opis.

W obszarze administracyjnym WordPress Aktywuj nową wtyczkę, przechodząc do wtyczki > zainstalowane wtyczki , a następnie klikając Aktywuj obok wtyczki TinyMCE Custom Link Class:

Konfigurowanie Naszej Klasy Wtyczek

Jeśli dwie wtyczki WordPress mają funkcje o tej samej nazwie, spowoduje to błąd. Unikniemy tego problemu, umieszczając nasze funkcje w klasie.

class TinyMCE_Custom_Link_Class {
	
	/**
	* Konstruktor. Wywołane podczas inicjalizacji wtyczki.
	*/
	function _ _ construct () {
		
	}

}

$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;

Tworzy to naszą klasę PHP wraz z konstrukcją, która jest wywoływana, gdy osiągniemy linię $tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;.

Wszelkie funkcje, które dodajemy wewnątrz tej klasy, nie powinny kolidować z innymi wtyczkami WordPress.

Zacznij Konfigurować Naszą Wtyczkę TinyMCE

Następnie musimy powiedzieć TinyMCE, że możemy chcieć dodać nasz niestandardowy przycisk do paska narzędzi edytora wizualnego. W tym celu możemy wykorzystać działania WordPressa-w szczególności init akcja.

Dodaj następujący kod wewnątrz wtyczki __konstrukcja() funkcja:

if (is_admin() ) {
	add_action ('init', array ($this, 'setup_tinymce_plugin' ) );
}

To sprawdza, czy jesteśmy w interfejsie administracyjnym WordPress. Jeśli tak, to prosi WordPressa o uruchomienie setup_tinymce_plugin funkcja wewnątrz naszej klasy, gdy WordPress zakończył swoje wstępne ładowanie rutynowych.

Następnie dodaj setup_tinymce_plugin funkcja:

/**
* Sprawdź, czy obecny użytkownik może edytować posty lub strony i korzysta z edytora wizualnego
* Jeśli tak, dodaj kilka filtrów, abyśmy mogli zarejestrować naszą wtyczkę
*/
function setup_tinymce_plugin () {

// Sprawdź, czy zalogowany użytkownik WordPress może edytować posty lub strony
// Jeśli nie, nie rejestruj naszej wtyczki TinyMCE
	
jeśli ( ! current_user_can ('edit_posts')&&! current_user_can ('edit_pages')) {
	        return;
}

// Sprawdź, czy zalogowany użytkownik WordPress ma włączony edytor wizualny
// Jeśli nie, nie rejestruj naszej wtyczki TinyMCE
if ( get_user_option( 'rich_editing' ) != = "true") {
return;
}

// Setup some filters
add_filter ('mce_external_plugins', array( &$this, 'add_tinymce_plugin' ) );
add_filter ('mce_buttons', array (&$this, 'add_tinymce_toolbar_button' ) );
		
	}

To sprawdza, czy obecny zalogowany użytkownik WordPress może edytować posty lub strony. Jeśli nie mogą, nie ma sensu rejestrować naszej wtyczki TinyMCE dla tego użytkownika, ponieważ nigdy nie zobaczą edytora wizualnego.

Następnie sprawdzamy, czy użytkownik korzysta z edytora wizualnego, ponieważ niektórzy użytkownicy WordPress wyłączają to za pomocą użytkownicy > Twój profil. Ponownie, jeśli użytkownik nie korzysta z edytora wizualnego, zwracamy (kończymy) funkcję, ponieważ nie musimy robić nic innego.

Na koniec dodajemy dwa filtry WordPress – mce_external_plugins oraz mce_buttons, aby wywołać nasze funkcje, które załadują wymagany plik Javascript dla TinyMCE i dodają przycisk do paska narzędzi TinyMCE.

Rejestracja pliku Javascript i przycisku w edytorze wizualnym

Dodajmy add_tinymce_plugin funkcja:

/**
* Dodaje plik JS kompatybilny z wtyczką TinyMCE do instancji edytora TinyMCE / Visual
*
* @ param array $ plugin_array tablica zarejestrowanych wtyczek TinyMCE
* @ return array zmodyfikowana tablica zarejestrowanych wtyczek TinyMCE
*/
function add_tinymce_plugin ($plugin_array ) {

$plugin_array['custom_link_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-link-class.js";
return $plugin_array;

}
    

Ta funkcja informuje TinyMCE, że musi załadować pliki Javascript zapisane w $plugin_array array. Te pliki Javascript powie TinyMCE, co robić.

Musimy też dodać jakiś kod do add_tinymce_toolbar_button funkcja, aby powiedzieć TinyMCE o przycisku, który chcielibyśmy dodać do paska narzędzi:

/**
* Dodaje przycisk do edytora TinyMCE / Visual, który użytkownik może kliknąć
* aby wstawić link z niestandardową klasą CSS.
*
* @ param array $buttons tablica zarejestrowanych przycisków TinyMCE
* @ return array zmodyfikowana tablica zarejestrowanych przycisków TinyMCE
*/
function add_tinymce_toolbar_button ($buttons ) {

array_push ($buttons,'/', 'custom_link_class');
return $ buttons;
}

Spowoduje to naciśnięcie dwóch elementów na tablicę przycisków TinyMCE: separatora ( / ) oraz programowej nazwy naszego przycisku (custom_link_class).

Zapisz wtyczkę, a następnie Edytuj stronę lub Post, aby wyświetlić edytor wizualny. Są szanse, że pasek narzędzi nie wyświetla się teraz:

Nie martw się-jeśli użyjemy konsoli Inspektora naszej przeglądarki internetowej, zobaczymy, że błąd 404 i powiadomienie zostały wygenerowane przez TinyMCE, informując nas, że nie może znaleźć naszego pliku Javascript.

To dobrze-oznacza to, że pomyślnie zarejestrowaliśmy naszą niestandardową wtyczkę TinyMCE, a teraz musimy utworzyć plik Javascript, aby powiedzieć TinyMCE, co robić.

Tworzenie wtyczki Javascript

Utwórz nowy plik w swoim wp-content / plugins / TinyMCE-custom-link-class folder i nadaj mu nazwę tinymce-custom-link-class.js. Dodaj ten kod do pliku js:

(function () {
	tinymce.PluginManager.add ('custom_link_class', function (editor, url ) {
		
	});
})();

Wywołuje to klasę TinyMCE Plugin Manager, której możemy użyć do wykonania szeregu działań związanych z wtyczką TinyMCE. W szczególności dodajemy naszą wtyczkę do TinyMCE za pomocą dodaj funkcja.

Akceptuje dwie pozycje; nazwa wtyczki (custom_link_class) oraz funkcję anonimową.

Jeśli znasz pojęcie funkcji w kodowaniu, funkcja anonimowa jest po prostu funkcją bez nazwy. Na przykład, function foobar () {... } jest funkcją, którą moglibyśmy wywołać gdzieś indziej w naszym kodzie za pomocą foobar ().

Z funkcją anonimową, nie możemy wywołać tej funkcji gdzieś indziej w naszym kodzie – jest ona wywoływana tylko w punkcie add() funkcja jest wywoływana.

Zapisz plik Javascript, a następnie Edytuj stronę lub Post, aby wyświetlić edytor wizualny. Jeśli wszystko działa, zobaczysz pasek narzędzi:

W tej chwili nasz przycisk nie został dodany do tego paska narzędzi. To dlatego, że powiedzieliśmy tylko TinyMCE, że jesteśmy niestandardową wtyczką. Teraz musimy powiedzieć TinyMCE, co ma zrobić-czyli dodać Przycisk do paska narzędzi.

Zaktualizuj plik Javascript, zastępując istniejący kod następującym kodem:

(function () {
	tinymce.PluginManager.add ('custom_link_class', function (editor, url ) {
		// Dodaj przycisk do paska narzędzi edytora wizualnego
		redaktor.addButton ('custom_link_class', {
			tytuł: 'Wstaw link',
			cmd: 'custom_link_class',
		});	
	});
})();

Zauważ, że nasza funkcja anonimowa ma dwa argumenty. Pierwszym z nich jest redaktor instancja-jest to edytor wizualny TinyMCE. W ten sam sposób możemy wywoływać różne funkcje na PluginManager, możemy również wywoływać różne funkcje na redaktor. W tym przypadku nazywamy addButton funkcja, aby dodać Przycisk do paska narzędzi.

Zapisz plik Javascript i wróć do edytora wizualnego. Na pierwszy rzut oka nic się nie zmieniło. Jeśli jednak najedziesz kursorem myszy na prawo od ikony prawego górnego wiersza, powinna pojawić się podpowiedź:

Z powodzeniem dodaliśmy przycisk do paska narzędzi, ale potrzebny jest obraz. Dodaj następujący parametr do addButton funkcja, poniżej tytuł: Kolejka:

image: url + ' / icon.png",

url jest adres URL do naszej wtyczki. Jest to przydatne, jeśli chcemy odwołać się do pliku obrazu w naszym folderze wtyczek, ponieważ możemy dołączyć nazwę pliku obrazu do adresu URL. W tym przypadku będziemy potrzebować obrazu o nazwie icon.png w folderze naszej wtyczki. Użyj poniższej ikony:

Przeładuj nasz edytor wizualny, a zobaczysz przycisk z ikoną:

Definiowanie polecenia do uruchomienia

Teraz, jeśli klikniesz przycisk, nic się nie stanie. Dodajmy komendę do TinyMCE mówiącą, co zrobić, gdy nasz przycisk zostanie kliknięty.

W naszym pliku Javascript Dodaj następujący kod pod koniec redaktor.addButton sekcja:

// Dodaj polecenie po kliknięciu przycisku
redaktor.addCommand ('custom_link_class', function () {
	alert ('Button clicked!');
});

Przeładuj nasz edytor wizualny, kliknij przycisk, a pojawi się komunikat potwierdzający, że właśnie kliknęliśmy przycisk:

Zastąp alert monitem, prosząc użytkownika o link, który chce owinąć wokół wybranego tekstu w edytorze wizualnym:

// Dodaj polecenie po kliknięciu przycisku
redaktor.addCommand ('custom_link_class', function () {
	// Sprawdź wybraliśmy tekst, który chcemy połączyć
	var text = editor.selekcja.getContent ({
		"format": "html"
	});
	if (tekst.length = = = 0) {
		alert ('proszę wybrać tekst do połączenia.' );
		return;
	}

	// Poproś użytkownika o podanie adresu URL
	var result = prompt ('Enter the link');
	jeśli ( !result) {
		// User cancelled-exit
		return;
	}
	if (result.length = = = 0) {
		// User didn ' t enter a URL-exit
		return;
	}

	// Wstaw zaznaczony tekst z powrotem do edytora, zawijając go w znacznik kotwicy
	redaktor.execCommand ('mceReplaceContent', false,' <A class="button" href=" '+ result + '" > ' + text + '</a>');
});

Ten blok kodu wykonuje kilka akcji.

Najpierw sprawdzamy, czy użytkownik wybrał tekst, który ma być połączony w edytorze wizualnym. Jeśli nie, zobaczysz komunikat z informacją o wybraniu tekstu do połączenia.

Następnie prosimy ich o wprowadzenie linku, ponownie sprawdzając, czy tak było. Jeśli odwołali, albo nic nie wpisali, nie robimy nic innego.

W końcu prowadzimy execCommand funkcja w edytorze TinyMCE, w szczególności uruchamianie mceReplaceContent akcja. To zastąpi wybrany tekst naszym kodem HTML, który składa się z linku zakotwiczenia z class=”button”, używając tekstu wybranego przez użytkownika.

Jeśli wszystko działa, zobaczysz, że wybrany tekst jest teraz połączony w widokach edytora wizualnego i tekstu, z klasą ustawioną na przycisk:

Streszczenie

Z powodzeniem stworzyliśmy wtyczkę WordPress, która dodaje przycisk do edytora wizualnego TinyMCE w WordPress. Ten samouczek omówił również niektóre podstawy interfejsu API TinyMCE i filtrów WordPress dostępnych dla integracji TinyMCE.

Dodaliśmy kod, aby gdy użytkownik kliknie nasz niestandardowy przycisk, został poproszony o wybranie tekstu w edytorze wizualnym, który następnie może połączyć się z wybranym przez siebie adresem URL. Na koniec nasza wtyczka zastępuje wybrany tekst połączoną wersją zawierającą niestandardową klasę CSS o nazwie przycisk.

Mamy nadzieję, że ten poradnik pomógł Ci dowiedzieć się, jak stworzyć wtyczkę WordPress TinyMCE. Możesz również zapoznać się z naszym przewodnikiem, jak utworzyć wtyczkę WordPress specyficzną dla witryny.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.