Kā izveidot WordPress TinyMCE spraudni

Ja esat WordPress izstrādātājs, kādā brīdī jums var rasties nepieciešamība paplašināt vai pielāgot vizuālo redaktoru. Piemēram, vēlēsities savai rīkjoslai pievienot pogu, kas ļauj klientiem izmantot noteiktas funkcijas, neizmantojot HTML kodu. Šajā rakstā mēs jums pateiksim, kā WordPress izveidot spraudni TinyMCE.

Prasības

Šis raksts ir paredzēts pieredzējušiem lietotājiem, un jums būs nepieciešamas pamata kodēšanas prasmes. Ņemiet vērā arī to, ka eksperimentēšana reālā vietnē nav laba ideja, jo pat mazākās kļūdas rezultātā jūsu vietne var kļūt nepieejama. Bet, ja plānojat uzņemties risku, vispirms noteikti izveidojiet vismaz WordPress dublējumkopiju.

Izveidojiet savu pirmo TinyMCE spraudni

Sāksim, izveidojot pielāgotu pogu rīkjoslai. Noklikšķinot uz šīs pogas, lietotājs varēs pievienot saiti ar pielāgotu CSS klasi. Pilns pirmkods tiks sniegts šī raksta beigās, bet pirms tam soli pa solim izveidosim mūsu spraudni. Vispirms mapē wp-content/plugins izveidojiet direktoriju un nosauciet to tinymce-custom-link-class.

Spraudņa nosaukums

Izveidojiet jaunu failu tikko izveidotajā direktorijā un nosauciet to tinymce-custom-link-class.php Pievienojiet šo kodu failam un saglabājiet to.

/**
 * Plugin Name: TinyMCE Custom Link Class
 * Plugin URI: https://coma.lv
 * Version: 1.0
 * Author: Coma.lv
 * Author URI: https://coma.lv
 * Description: A simple TinyMCE Plugin to add a custom link class in the Visual Editor
 * License: GPL2
 */

Šis ir vienkārši PHP komentārs, kas norāda WordPress spraudņa nosaukumu, kā arī tā autoru un aprakstu. Savā WordPress administratora panelī aktivizējiet jauno spraudni, atverot lapu Plugins – Installed Plugins un sadaļā TinyMCE Custom Link Class noklikšķinot uz saites Activate.

Mūsu spraudņu klases iestatīšana

Ja diviem spraudņiem ir funkcijas ar vienādu nosaukumu, tas var izraisīt kļūdu. Mēs izvairīsimies no šīs problēmas, iekļaujot savas funkcijas klasē.

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

}

$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;

Tādējādi tiek izveidota PHP klase kopā ar konstrukciju, kas tiek izsaukta, kad sasniedzam rindu $tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;

Nevienai šai klasei pievienotajai funkcijai nevajadzētu būt pretrunā ar citiem WordPress spraudņiem.

Mūsu TinyMCE spraudņa iestatīšana

Tālāk mums jāpasaka TinyMCE, ka vēlamies vizuālā redaktora rīkjoslai pievienot pielāgotu pogu. Lai to izdarītu, mēs varam izmantot WordPress actions. Šajā gadījumā action kuru sauc par init. Pievienojiet spraudņa funkcijai __construct() šādu kodu.

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

Šī funkcija pārbaudīs, vai atrodamies administratora panelī. Ja atbilde ir jā, funkcija lūdz palaist funkciju setup_tinymce_plugin mūsu klasē, tiklīdz WordPress ir beidzis ielādi. Pēc tam pievienojiet funkciju 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' ) );
		
	}

Šī funkcija jau pārbaudīs, vai pieteicies lietotājs var rediģēt ziņas vai lapas. Ja nē, tad nav jēgas reģistrēt mūsu spraudni šim lietotājam, jo ​​viņš nekad neredzēs vizuālo redaktoru. Pēc tam mēs pārbaudām, vai lietotājs izmanto vizuālo redaktoru, jo daži lietotāji to atspējo savā profilā. Atkal, ja lietotājs neizmanto vizuālo redaktoru, mēs atgriežamies (exit), jo mums nekas cits nav vajadzīgs. Visbeidzot, mēs pievienojam divus WordPress filtrus – mce_external_plugins un mce_buttons, lai izsauktu funkcijas, kas ielādēs nepieciešamo Javascript failu TinyMCE un pievienos atbilstošo pogu rīkjoslai.

Javascript faila un vizuālā redaktora pogas reģistrēšana

Pievienosim funkciju 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;

}
 

Šī funkcija liek TinyMCE ielādēt Javascript failus, kas atrodas šūnā $plugin_array. Šie faili pateiks TinyMCE, kas jādara. Mums arī jāpievieno kods funkcijai add_tinymce_toolbar_button, lai paziņotu TinyMCE par pogu, kuru mēs vēlamies pievienot rīkjoslai.

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

Tādējādi TinyMCE pogu šūnai tiek pievienoti divi elementi: atdalītājs (|) un mūsu pogas nosaukums (custom_link_class). Saglabājiet spraudni un rediģējiet lapu vai ziņu, lai skatītu vizuālo redaktoru. Visticamāk, jūs neredzēsit rīkjoslu.

Neuztraucieties — ja skatāties brauzera inspektorā, jūs redzēsit TinyMCE ģenerētu kļūdu 404, norādot, ka tā nevar atrast mūsu Javascript failu.

Tā patiesībā ir laba zīme, jo tas nozīmē, ka esam veiksmīgi reģistrējuši pielāgotu TinyMCE spraudni un tagad mums ir jāizveido Javascript fails, kas norāda TinyMCE, kas jādara.

JavaScript spraudņa izveidošana

Izveidojiet jaunu failu mapē wp-content/plugins/tinymce-custom-link-class un piešķiriet tam nosaukumu tinymce-custom-link-class.js, pēc tam pievienojiet tam šādu kodu:

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

Tas izsauc TinyMCE Plugin Manager klasi, ko varam izmantot, lai veiktu daudzas ar spraudņiem saistītas darbības. Jo īpaši mēs pievienojam savu spraudni TinyMCE, izmantojot funkciju add. Tam nepieciešami divi elementi; spraudņa nosaukums (custom_link_class) un anonimitātes funkcija. Ja esat iepazinies ar funkciju jēdzienu kodēšanā, tad anonīma funkcija ir vienkārši funkcija bez nosaukuma. Piemēram, funkcija foobar () { … } ir funkcija, kuru mēs varam izsaukt kaut kur citur koda iekšpusē, izmantojot foobar ().

Izmantojot anonīmo funkciju, mēs nevaram izsaukt šo funkciju nekur citur kodā – tikai izmantojot funkciju add(). Saglabājiet savu Javascript failu un sāciet rediģēt lapu vai ziņu, lai redzētu vizuālo redaktoru. Ja viss strādā, jūs redzēsit rīkjoslu:

Šobrīd mūsu poga nav pievienota rīkjoslai. Tas ir tāpēc, ka mēs tikai TinyMCE teicām, ka esam izveidojuši pielāgotu spraudni. Tagad mums ir jāpasaka TinyMCE, kas jādara, tas ir, rīkjoslai jāpievieno poga. Atjauniniet savu Javascript failu, aizstājot esošo kodu ar šādu:

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

Ņemiet vērā, ka mūsu anonīmajai funkcijai ir divi argumenti. Pirmais ir redaktors, kas ir TinyMCE vizuālais redaktors. Tāpat kā mēs varam izsaukt dažādas funkcijas PluginManager, mēs varam izsaukt dažādas funkcijas arī redaktorā. Šajā gadījumā mēs izsaucam funkciju addButton, lai rīkjoslai pievienotu pogu. Saglabājiet savu javascript failu un atgriezieties vizuālajā redaktorā. No pirmā acu uzmetiena nekas nav mainījies. Tomēr, ja novietojat peles kursoru virs ikonas augšējā labajā stūrī, jūs redzēsit mājienu:

Mēs esam veiksmīgi pievienojuši pogu rīkjoslai, taču tai ir nepieciešams attēls. Pievienojiet šādu parametru funkcijai addButton zem title:

image: url + ‘/icon.png’,

url ir mūsu spraudņa adrese. Tas ir noderīgi, ja vēlamies izveidot saiti uz attēla failu no spraudņa mapes. Šajā gadījumā spraudņa mapē mums būs nepieciešams attēls ar nosaukumu icon.png. Izmantojiet šo ikonu:

Restartējiet vizuālo redaktoru, un jūs redzēsit savu pogu ar ikonu:

Norādiet palaišanas komandu

Šobrīd, ja noklikšķināsiet uz pogas, nekas nenotiks. Pievienosim komandu, kas norāda TinyMCE, kas jādara. Pievienojiet tālāk norādīto kodu mūsu Javascript failam zem sadaļas editor.addButton beigām

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

Atkārtoti ielādējiet mūsu vizuālo redaktoru, noklikšķiniet uz pogas, un tiks parādīts paziņojums, ka tikko noklikšķinājāt uz pogas:

Aizstāsim paziņojumu ar rindiņu, kurā lietotājam tiek prasīta saite, kuru viņš vēlas apvilkt ap atlasīto tekstu vizuālajā redaktorā.

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

Kodu bloks veic vairākas darbības. Vispirms mēs pārbaudām, vai lietotājs ir atlasījis tekstu, ko ietīt vizuālajā redaktorā. Ja nē, viņi redzēs šādu ziņojumu.

Pēc tam mēs lūdzam viņus ievadīt saiti, vēlreiz pārbaudot, ko viņi ir izdarījuši. Ja viņi atcēla vai neko neieviesa, tad arī mēs neko nedarām.

Visbeidzot, TinyMCE redaktorā palaižam funkciju execCommand, izpildot darbību mceReplaceContent. Tādējādi atlasītais teksts tiek aizstāts ar mūsu HTML kodu, kurā ir ietverta enkura saite ar class=”button”, izmantojot atlasīto tekstu. Ja viss strādāja, jūs redzēsit atlasīto tekstu, kas vizuālajā redaktorā ir saistīts ar klasi, kas ir saistīta ar pogu:

Rezultāti

Mēs esam veiksmīgi izveidojuši WordPress spraudni, kas pievieno pogu TinyMCE vizuālajam redaktoram WordPress. Šajā apmācībā tika apskatīti arī daži TinyMCE API un filtru integrācijas pamati. Mēs pievienojām kodu, lai, kad lietotājs noklikšķina uz mūsu pielāgotās pogas, viņam tiek piedāvāts vizuālajā redaktorā atlasīt tekstu, uz kuru var izveidot saiti pēc saviem ieskatiem. Visbeidzot, mūsu spraudnis aizstāj atlasīto tekstu ar tā atsauces versiju, kurā ir pielāgota CSS klase ar nosaukumu button.

---

Mūsu specialitāte ir WordPress vietņu izstrāde un atbalsts. Kontakti bezmaksas konsultācijai — [email protected], +371 29394520

---