Så här skapar du ett TinyMCE tillägg för WordPress

Om du är WordPress utvecklare kan du vid något tillfälle komma att customize eller utöka WordPress Visual Editor. Till exempel kanske du vill lägga till en knapp i Visual Editors toolbar för att allow your client to enkelt insert en text box eller en call-to-action knapp utan att skriva någon HTML-kod. I den här artikeln kommer vi att visa dig hur du skapar ett TinyMCE plugin i WordPress.

Obligatoriska krav

Denna tutorial är avsedd för avancerade användare. Om du är en användare på nybörjarnivå som bara vill utöka visual editor, vänligen kontrollera TinyMCE Advanced plugin eller ta en titt på dessa tips om att använda WordPress visual editor.

För denna tutorial behöver du grundläggande kodningskunskaper, tillgång till en WordPress install där du kan testa det.

Det är en dålig idé att utveckla tillägg på en live website. Ett litet misstag i koden kan göra din site otillgänglig. Men om du måste göra det på en live site, så gör åtminstone en backup av WordPress först.

Skapa ditt första TinyMCE tillägg

Vi börjar med att skapa ett WordPress plugin för att registrera vår custom TinyMCE toolbar knapp. När du klickar på den här knappen kommer användaren att kunna add to en länk med en customize CSS-klass.

Källkoden kommer att tillhandahållas i sin helhet i slutet av denna artikel, men fram till dess, låt oss skapa plugin steg för steg.

Först måste du skapa en directory i wp-content/plugins folder i din WordPress install. Namnge den här foldern tinymce-customize-link-class.

Härifrån kommer vi att börja lägga till vår plugin-kod.

Pluginets Header

Skapa en new fil i plugin directory som vi just skapade och namnge denna fil tinymce-custom-link-class.php. Add denna kod till filen och save den.

/**
 * 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
 */

Detta är bara en PHP-kommentar, som berättar för WordPress namnet på plugin, liksom författaren och en description.

I WordPress admin area aktiverar du ditt nya plugin genom att gå till Plugins > Installerade plugins och sedan klicka på Activate bredvid TinyMCE Custom Link Class plugin:

Setting Up Our Plugin Class

Om två tillägg till WordPress har funktioner med samma namn, skulle detta orsaka ett error. Vi undviker detta problem genom att omsluta våra funktioner i en klass.

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

}

$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;

Detta skapar vår PHP-klass, tillsammans med en konstruktion, som anropas när vi når raden $tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;.

Alla funktioner som vi lägger till i den här klassen bör inte stå i konflikt med andra tillägg till WordPress.

Börja konfigurera vårt TinyMCE tillägg

Därefter måste vi berätta för TinyMCE att vi kanske vill add to vår custom knapp till Visual Editors toolbar. För att göra detta kan vi använda WordPress actions – särskilt init action.

Add to följande kod inuti ditt plugins __construct () -funktion:

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

Detta kontrollerar om vi befinner oss i gränssnittet WordPress Administration. Om vi är det, ber den WordPress att runna setup_tinymce_plugin-funktionen i vår klass när WordPress har slutfört sin första hämtarutin.

Lägg sedan till funktionen 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' ) );
		
	}

Detta kontrollerar om den aktuella inloggade WordPress-användaren kan editera Posts eller Pages. Om de inte kan det, är det ingen mening att registrera vårt TinyMCE Plugin för den användaren, eftersom de aldrig kommer att se Visual Editor.

Vi kontrollerar sedan om användaren använder Visual Editor, eftersom vissa WordPress-användare stänger av detta via Användare > Your Profile. Återigen, om användaren inte använder Visual Editor, returnerar (avslutar) vi funktionen, eftersom vi inte behöver göra något annat.

Slutligen lägger vi till två WordPress-filter – mce_external_plugins och mce_buttons, för att anropa våra funktioner som hämtar den obligatoriska JavaScript-filen för TinyMCE och lägger till en knapp i TinyMCE toolbar.

Registrera JavaScript-filen och knappen till Visual Editor

Låt oss gå vidare och add to add_tinymce_plugin-funktionen:

/**
* 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;

}
    

Denna funktion berättar för TinyMCE att den behöver hämta de JavaScript-filer som är lagrade i $plugin_array array. Dessa JavaScript-filer kommer att berätta för TinyMCE vad de ska göra.

Vi måste också add to lite kod till add_tinymce_toolbar_button-funktionen för att berätta för TinyMCE om den knapp vi gillar att lägga till i toolbaren:

/**
* 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;
}

Detta lägger till två objekt i arrayen av TinyMCE-knappar: en separator (|) och vår knapps programmatiska namn(custom_link_class).

Save your plugin, och edit sedan en Page eller Post för att view the Visual Editor. Chansen är stor att toolbaren inte visas just nu:

Oroa dig inte – om vi använder vår web browsers inspektörskonsol ser vi att ett 404 error och notice har genererats av TinyMCE, vilket säger att den inte kan hitta vår JavaScript-fil.

Det är bra – det betyder att vi har registrerat vårt TinyMCE custom plugin utan problem, och nu måste vi skapa JavaScript-filen för att berätta för TinyMCE vad vi ska göra.

Skapa tillägget JavaScript

Skapa en new fil i din wp-content/plugins/tinymce-custom-link-class folder, och namnge den tinymce-custom-link-class.js. Add this code in your js file:

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

Detta anropar TinyMCE Plugin Manager-klassen, som vi kan använda för att utföra ett antal TinyMCE plugin-relaterade actions. Specifikt lägger vi till vårt plugin till TinyMCE med hjälp av add-funktionen.

Detta godkänner två objekt; namnet på pluginet (custom_link_class) och en anonym funktion.

Om du är bekant med begreppet funktioner i kodning, är en anonym funktion helt enkelt en funktion utan namn. Till exempel, funktion foobar() { .. . } är en funktion som vi kan anropa någon annanstans i vår kod genom att använda foobar ().

Med en anonym funktion kan vi inte anropa den funktionen någon annanstans i vår kod – den anropas bara vid den punkt då add( )-funktionen anropas.

Save your JavaScript file, and then edit a Page or Post to view the Visual Editor. Om allt fungerade kommer du att se toolbaren:

Just nu har vår knapp inte lagts till i verktygsfältet. Det beror på att vi bara har berättat för TinyMCE att vi är ett customze plugin. Vi måste nu berätta för TinyMCE vad vi ska göra – det vill säga add a button to the toolbar.

Update din JavaScript-fil och ersätt din befintliga kod med följande:

(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',
		});	
	});
})();

Notice vår anonyma funktion har två argument. Den första är editor-instansen – det här är TinyMCE Visual Editor. På samma sätt som vi kan anropa olika funktioner på PluginManager kan vi också anropa olika funktioner på Editorn. I det här fallet anropar vi funktionen addButton för att lägga till en knapp i toolbaren.

Save your JavaScript file, and go back to your Visual Editor. Vid en första anblick verkar ingenting ha förändrats. Men om du hoverar muspekaren över till höger om den översta row’s rightmost icon, bör du se ett tooltip visas:

Vi har utan problem addat en knapp till toolbaren, men den behöver en image. Lägg till följande parameter i addButton-funktionen, under raden title::

image: url + '/icon.png',

url är URL:en till vårt plugin. Detta är praktiskt om vi vill referera till en image-fil i vår plugin folder, eftersom vi kan lägga till image-filnamnet till URL. I det här fallet behöver vi en image som heter icon.png i vår plugin’s folder. Använd ikonen under:

Ladda om vår Visual Editor, och du kommer nu att se din knapp med ikonen:

Definiera ett kommando som ska run

Just nu, om du klickar på knappen, kommer ingenting att hända. Låt oss add to ett kommando till TinyMCE som säger vad den ska göra när du klickar på vår knapp.

I vår JavaScript-fil lägger du till följande kod under slutet av editor.addButton section:

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

Ladda om vår Visual Editor, klicka på knappen och en alert kommer att visas som bekräftar att vi just klickade på knappen:

Låt oss ersätta alerten med en prompt som ber användaren om den länk som de vill automatiskt radbyte runt den valda texten i Visual Editor:

// 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>');
});

Detta block av kod utför några actions.

Först kontrollerar vi om användaren har valt någon text som ska länkas i Visual Editor. Om ej, visas en alert som uppmanar användaren att välja en text att länka.

Därefter ber vi dem att enter en länk, och kontrollerar återigen om de gjorde det. Om de canceled, eller inte enter något, gör vi inget mer.

Slutligen kör vi execCommand-funktionen på TinyMCE editor, specifikt kör mceReplaceContent action. Detta ersätter den valda texten med vår HTML-kod, som består av en ankar link med class=”button”, med den text som användaren valde.

Om allt fungerade kommer du att se att din valda text nu är länkad i Visual Editor och Text views, med klassen inställd på knapp:

Sammanfattning

Vi har utan problem skapat ett WordPress plugin som adderar en knapp till TinyMCE visual editor i WordPress. Denna tutorial har också täckt några av grunderna i TinyMCE API och WordPress-filter som är tillgängliga för TinyMCE-integrationer.

Vi har lagt till kod så att när en användare klickar på vår customize knapp, uppmanas de att välja lite text i Visual Editor, som de sedan kan länka till en URL som de själva väljer. Slutligen ersätter vårt plugin sedan den valda texten med en länkad version som innehåller en custom CSS-klass som heter button.

Vi hoppas att denna tutorial hjälpte dig att lära dig hur du skapar ett WordPress TinyMCE plugin. Du kanske också vill kontrollera vår guide om hur man skapar ett site-specifikt WordPress plugin.

Om du gillade den här artikeln, vänligen prenumerera på vår YouTube-kanal för WordPress video tutorials. Du kan också hitta oss på Twitter och Facebook.