Jak stworzyć wtyczkę TinyMCE dla WordPress

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

Wymagania

Ten tutorial jest przeznaczony dla zaawansowanych użytkowników. Jeśli jesteś początkującym użytkownikiem, który chce tylko rozszerzyć edytor wizualny, sprawdź TinyMCE Advanced plugin lub zapoznaj się z tymi wskazówkami dotyczącymi korzystania z edytora wizualnego WordPressa.

Do tego samouczka potrzebne będą podstawowe umiejętności kodowania, dostęp do instalacji WordPress, gdzie można ją przetestować.

Tworzenie wtyczek na żywej stronie internetowej jest złym nawykiem. Drobny błąd w kodzie może sprawić, że Twoja strona stanie się niedostępna. Ale jeśli musisz to zrobić na żywej stronie, to przynajmniej zrób kopię zapasową WordPress najpierw.

Tworzenie pierwszego wtyczki TinyMCE

Zaczniemy od utworzenia 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 podany 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 folderze wp-content/plugins swojej instalacji WordPress. Nazwij ten folder tinymce-custom-link-class.

Stąd zaczniemy dodawać kod naszej wtyczki.

Nagłówek wtyczki

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

/**
 * Plugin Name: TinyMCE Custom Link Class
 * Plugin URI: http://wpbeginner.com
 * Version: 1.0
 * Author: WPBeginner
 * Author URI: https://www.wpbeginner.com
 * Description: A simple TinyMCE Plugin to add a custom link class in the Visual Editor
 * License: GPL2
 */

To tylko komentarz PHP, który informuje WordPress o nazwie wtyczki, a także o autorze i opisie.

W obszarze administracyjnym WordPress administratora, aktywuj swój nowy wtyczkę, przechodząc do Wtyczki > Zainstalowane wtyczki, a następnie klikając Aktywuj obok wtyczki TinyMCE Custom Link Class:

Konfiguracja naszej klasy wtyczki

Jeśli dwa wtyczki WordPress mają funkcje o tej samej nazwie, spowoduje to błąd. Unikniemy tego problemu, opakowując nasze funkcje w klasę.

class TinyMCE_Custom_Link_Class {
	
	/**
	* Constructor. Called when the plugin is initialised.
	*/
	function __construct() {
		
	}

}

$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;

Tworzy to naszą klasę PHP wraz z konstruktorem, który jest wywoływany, gdy dojdziemy do linii $tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;.

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

Rozpocznij konfigurację naszego wtyczki TinyMCE

Następnie musimy poinformować TinyMCE, że możemy chcieć dodać nasz niestandardowy przycisk do paska narzędzi Edytora Wizualnego. Aby to zrobić, możemy użyć akcji WordPress – konkretnie akcji init.

Dodaj następujący kod do funkcji __construct() swojej wtyczki:

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

To sprawdza, czy znajdujemy się w interfejsie administracyjnym WordPressa. Jeśli tak, prosi WordPress o uruchomienie funkcji setup_tinymce_plugin w naszej klasie, gdy WordPress zakończy swoją początkową rutynę ładowania.

Następnie dodaj funkcję setup_tinymce_plugin:

/**
* Check if the current user can edit Posts or Pages, and is using the Visual Editor
* If so, add some filters so we can register our plugin
*/
function setup_tinymce_plugin() {

// Check if the logged in WordPress User can edit Posts or Pages
// If not, don't register our TinyMCE plugin
	
if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
	        return;
}

// Check if the logged in WordPress User has the Visual Editor enabled
// If not, don't register our TinyMCE plugin
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' ) );
		
	}

Sprawdza to, czy aktualnie zalogowany użytkownik WordPress może edytować Wpisy lub Strony. Jeśli nie może, nie ma sensu rejestrować naszej wtyczki TinyMCE dla tego użytkownika, ponieważ nigdy nie zobaczy on Edytora Wizualnego.

Następnie sprawdzamy, czy użytkownik korzysta z Edytora Wizualnego, ponieważ niektórzy użytkownicy WordPressa wyłączają go w Użytkownicy > Twój profil. Ponownie, jeśli użytkownik nie korzysta z Edytora Wizualnego, zwracamy (kończymy) funkcję, ponieważ nie musimy nic więcej robić.

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

Rejestrowanie pliku Javascript i przycisku w Edytorze Wizualnym

Dodajmy teraz funkcję add_tinymce_plugin:

/**
* Adds a TinyMCE plugin compatible JS file to the TinyMCE / Visual Editor instance
*
* @param array $plugin_array Array of registered TinyMCE Plugins
* @return array Modified array of registered TinyMCE Plugins
*/
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 przechowywane w tablicy $plugin_array. Te pliki Javascript powiedzą TinyMCE, co ma robić.

Musimy również dodać trochę kodu do funkcji add_tinymce_toolbar_button, aby poinformować TinyMCE o przycisku, który chcemy dodać do paska narzędzi:

/**
* Adds a button to the TinyMCE / Visual Editor which the user can click
* to insert a link with a custom CSS class.
*
* @param array $buttons Array of registered TinyMCE Buttons
* @return array Modified array of registered TinyMCE Buttons
*/
function add_tinymce_toolbar_button( $buttons ) {

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

To dodaje dwa elementy do tablicy przycisków TinyMCE: separator (|) i programową nazwę naszego przycisku (custom_link_class).

Zapisz swoją wtyczkę, a następnie edytuj Stronę lub Wpis, aby zobaczyć Edytor Wizualny. Prawdopodobnie pasek narzędzi nie wyświetla się teraz poprawnie:

Nie martw się – jeśli użyjemy konsoli inspektora naszej przeglądarki internetowej, zobaczymy, że TinyMCE wygenerował błąd 404 i powiadomienie, informujące nas, że nie może znaleźć naszego pliku Javascript.

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

Tworzenie wtyczki Javascript

Utwórz nowy plik w folderze wp-content/plugins/tinymce-custom-link-class i nazwij go tinymce-custom-link-class.js. Dodaj ten kod do swojego pliku js:

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

To wywołuje klasę TinyMCE Plugin Manager, której możemy użyć do wykonania szeregu akcji związanych z wtyczkami TinyMCE. Konkretnie, dodajemy naszą wtyczkę do TinyMCE za pomocą funkcji add.

Akceptuje dwie pozycje; nazwę wtyczki (custom_link_class) i anonimową funkcję.

Jeśli znasz koncepcję funkcji w kodowaniu, anonimowa funkcja to po prostu funkcja bez nazwy. Na przykład, function foobar() { ... } to funkcja, którą moglibyśmy wywołać gdzie indziej w naszym kodzie, używając foobar().

Dzięki anonimowej funkcji nie możemy wywołać tej funkcji gdzie indziej w naszym kodzie – jest ona wywoływana tylko w momencie, gdy wywoływana jest funkcja add().

Zapisz swój plik Javascript, a następnie edytuj Stronę lub Wpis, aby zobaczyć Edytor Wizualny. Jeśli wszystko zadziałało, zobaczysz pasek narzędzi:

Teraz nasz przycisk nie został dodany do tego paska narzędzi. Dzieje się tak, ponieważ poinformowaliśmy tylko TinyMCE, że jesteśmy niestandardową wtyczką. Teraz musimy powiedzieć TinyMCE, co ma zrobić – to znaczy, dodać przycisk do paska narzędzi.

Zaktualizuj swój plik Javascript, zastępując istniejący kod poniższym:

(function() {
	tinymce.PluginManager.add( 'custom_link_class', function( editor, url ) {
		// Add Button to Visual Editor Toolbar
		editor.addButton('custom_link_class', {
			title: 'Insert Button Link',
			cmd: 'custom_link_class',
		});	
	});
})();

Zauważ, że nasza anonimowa funkcja ma dwa argumenty. Pierwszym jest instancja editor – jest to Edytor Wizualny TinyMCE. W ten sam sposób, w jaki możemy wywoływać różne funkcje na PluginManager, możemy również wywoływać różne funkcje na editor. W tym przypadku wywołujemy funkcję addButton, aby dodać przycisk do paska narzędzi.

Zapisz swój plik Javascript i wróć do Edytora Wizualnego. Na pierwszy rzut oka nic się nie wydaje zmienić. Jednak jeśli najedziesz kursorem myszy na prawo od najbardziej prawego ikony w górnym rzędzie, powinieneś zobaczyć pojawiający się podpowiedź:

Pomyślnie dodaliśmy przycisk do paska narzędzi, ale potrzebuje on obrazka. Dodaj następujący parametr do funkcji addButton, poniżej linii title::

image: url + '/icon.png',

url is the URL to our plugin. This is handy if we want to reference an image file within our plugin folder, as we can append the image file name to the URL. In this case, we’ll need an image called icon.png in our plugin’s folder. Use the below icon:

Reload our Visual Editor, and you’ll now see your button with the icon:

Definiowanie polecenia do wykonania

Teraz, jeśli klikniesz przycisk, nic się nie stanie. Dodajmy polecenie do TinyMCE, mówiące mu, co ma zrobić po kliknięciu naszego przycisku.

W naszym pliku Javascript dodaj poniższy kod na końcu sekcji editor.addButton:

// Add Command when Button Clicked
editor.addCommand('custom_link_class', function() {
	alert('Button clicked!');
});

Odśwież nasz Edytor Wizualny, kliknij przycisk, a pojawi się alert potwierdzający, że właśnie kliknęliśmy przycisk:

Zastąpmy alert monitem, pytając użytkownika o link, który chce otoczyć zaznaczony tekst w Edytorze Wizualnym:

// Add Command when Button Clicked
editor.addCommand('custom_link_class', function() {
	// Check we have selected some text that we want to link
	var text = editor.selection.getContent({
		'format': 'html'
	});
	if ( text.length === 0 ) {
		alert( 'Please select some text to link.' );
		return;
	}

	// Ask the user to enter a URL
	var result = prompt('Enter the link');
	if ( !result ) {
		// User cancelled - exit
		return;
	}
	if (result.length === 0) {
		// User didn't enter a URL - exit
		return;
	}

	// Insert selected text back into editor, wrapping it in an anchor tag
	editor.execCommand('mceReplaceContent', false, '<a class="button" href="' + result + '">' + text + '</a>');
});

Ten blok kodu wykonuje kilka czynności.

Najpierw sprawdzamy, czy użytkownik wybrał jakiś tekst do połączenia w Edytorze Wizualnym. Jeśli nie, zobaczy alert informujący go o konieczności wybrania tekstu do połączenia.

Następnie prosimy ich o wprowadzenie linku, ponownie sprawdzając, czy to zrobili. Jeśli anulowali lub nic nie wprowadzili, nie robimy nic więcej.

Na koniec uruchamiamy funkcję execCommand w edytorze TinyMCE, konkretnie wykonując akcję mceReplaceContent. Zastępuje to zaznaczony tekst naszym kodem HTML, który składa się z linku kotwicy z klasą "button", używając tekstu wybranego przez użytkownika.

Jeśli wszystko zadziałało, zobaczysz, że zaznaczony tekst jest teraz połączony w widokach Edytora Wizualnego i Tekstu, z klasą ustawioną na button:

Podsumowanie

Pomyślnie utworzyliśmy wtyczkę WordPress, która dodaje przycisk do wizualnego edytora TinyMCE w WordPress. Ten samouczek obejmował również podstawy API TinyMCE i filtry WordPress dostępne dla integracji TinyMCE.

Dodaliśmy kod, dzięki czemu po kliknięciu naszego niestandardowego przycisku użytkownik jest proszony o zaznaczenie tekstu w Edytorze Wizualnym, który następnie może połączyć z wybranym adresem URL. Na koniec nasza wtyczka zastępuje zaznaczony tekst wersją z linkiem, która zawiera niestandardową klasę CSS o nazwie button.

Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak stworzyć wtyczkę WordPress TinyMCE. Możesz również zapoznać się z naszym przewodnikiem na temat tworzenia wtyczki WordPress specyficznej dla witryny.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.