L'une de mes mises à jour préférées dans WordPress 3.9 consistait à créer le noyau TinyMCE version 4.0. Le nouveau TinyMCE a l'air plus propre (correspond vraiment au tableau de bord WP) et il a de très belles fonctionnalités supplémentaires. Beaucoup de mes anciens thèmes et plugins ont dû être mis à jour pour fonctionner avec le nouveau TinyMCE, j'ai donc passé du temps à creuser l'API et trouver des trucs sympas. Ci-dessous, je vais vous donner quelques exemples sur la façon dont vous pouvez étendre les fonctionnalités du TinyMCE. Je ne vais pas vous expliquer toutes les étapes ou ce que signifie exactement le code (ceci est destiné aux développeurs), mais je vous fournirai le code exact que vous pouvez copier/coller dans votre thème ou plugin, puis le modifier en conséquence.

Ajout de sélections de taille de police et de famille de polices

Par défaut, les polices personnalisées et les tailles de police ne sont pas ajoutées dans l'éditeur TinyMCE. La fonction ci-dessous ajoutera ces deux listes déroulantes à l'extrême gauche de l'éditeur dans la deuxième ligne. Changez simplement où il est écrit “mce_buttons_2” si vous le voulez dans une ligne différente (ex : utilisez “mce_buttons_3” pour la 3ème ligne).

// Enable font size & font family selects in the editor
if ( ! function_exists( 'wpex_mce_buttons' ) ) {
	function wpex_mce_buttons( $buttons ) {
		array_unshift( $buttons, 'fontselect' ); // Add Font Select
		array_unshift( $buttons, 'fontsizeselect' ); // Add Font Size Select
		return $buttons;
	}
}
add_filter( 'mce_buttons_2', 'wpex_mce_buttons' );

Ajout de tailles de police personnalisées

Par défaut, les tailles de police sont définies sur des valeurs en pt, ce qui n'est pas toujours idéal. Je préfère utiliser des valeurs de pixel (12px, 13px, 14px, 16px..etc) et fournir plus d'options pour une plus grande flexibilité. La fonction ci-dessous modifiera les options de taille de police par défaut dans le sélecteur déroulant.

// Customize mce editor font sizes
if ( ! function_exists( 'wpex_mce_text_sizes' ) ) {
	function wpex_mce_text_sizes( $initArray ){
		$initArray['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
		return $initArray;
	}
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_text_sizes' );

Ajout de polices personnalisées

Les options de police par défaut dans le sélecteur de famille de polices sont toutes des polices « Web-Safe » par défaut, mais que se passe-t-il si vous souhaitez ajouter plus de polices au sélecteur ? Peut-être des Google Fonts ? Nous allons c'est vraiment facile jeter un oeil à l'exemple ci-dessous.

// Add custom Fonts to the Fonts list
if ( ! function_exists( 'wpex_mce_google_fonts_array' ) ) {
	function wpex_mce_google_fonts_array( $initArray ) {
	    $initArray['font_formats'] = 'Lato=Lato;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats';
            return $initArray;
	}
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' );

Remarquez comment j'ai ajouté “Lato” à la liste dans le code ci-dessus ? C'est si simple! Dans mon thème Total WordPress, je parcoure en fait toutes les polices personnalisées utilisées sur le site telles que définies dans le panneau de thème et les ajoute à la zone de sélection afin qu'elles soient également disponibles lors de l'édition de vos publications/pages (sweet). Mais le code annonce UNIQUEMENT la famille de polices dans la liste déroulante, il ne chargera pas le script comme par magie, de sorte que lorsque vous modifiez votre texte dans l'éditeur, vous pouvez réellement voir cette police personnalisée qui lui est appliquée… C'est ce que fait le code ci-dessous !

// Add Google Scripts for use with the editor
if ( ! function_exists( 'wpex_mce_google_fonts_styles' ) ) {
	function wpex_mce_google_fonts_styles() {
	   $font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
           add_editor_style( str_replace( ',', '%2C', $font_url ) );
	}
}
add_action( 'init', 'wpex_mce_google_fonts_styles' );

Activer le menu déroulant Formats (styles) et ajouter de nouveaux styles

Vous souvenez-vous de la liste déroulante “Styles” dans WP 3.8 ? C'était plutôt cool ! Vous pouvez l'utiliser pour ajouter des classes intéressantes à utiliser dans l'éditeur de publication (je l'utilise sur WPExplorer en fait pour les boutons, les étendues colorées, les boîtes, etc.). Nous allons dans WP 3.9, vous pouvez toujours ajouter des styles, cependant, il a été renommé dans le nouveau TinyMCE 4.0 en “Formats” donc cela fonctionne un peu différemment. Vous trouverez ci-dessous un exemple de la façon d'activer la liste déroulante Formats et d'y ajouter également de nouveaux éléments.

Menu déroulant des formats WordPress TInyMCE

Activer le menu déroulant des formats

Cela se fait en fait de la même manière avant WP 3.9 mais je partage au cas où vous ne sauriez pas comment le faire.

// Add Formats Dropdown Menu To MCE
if ( ! function_exists( 'wpex_style_select' ) ) {
	function wpex_style_select( $buttons ) {
		array_push( $buttons, 'styleselect' );
		return $buttons;
	}
}
add_filter( 'mce_buttons', 'wpex_style_select' );

Ajouter de nouveaux éléments aux formats

L'ajout de nouveaux éléments est super facile. Veuillez noter que j'ai ajouté “$settings[‘style_formats_merge’] = vrai ; » au code ci-dessous, cela garantit que vos modifications sont ajoutées au menu déroulant des formats avec les autres – n'écrasez pas tout (peut-être que d'autres plugins veulent également l'utiliser).

// Add new styles to the TinyMCE "formats" menu dropdown
if ( ! function_exists( 'wpex_styles_dropdown' ) ) {
	function wpex_styles_dropdown( $settings ) {

		// Create array of new styles
		$new_styles = array(
			array(
				'title'	=> __( 'Custom Styles', 'wpex' ),
				'items'	=> array(
					array(
						'title'		=> __('Theme Button','wpex'),
						'selector'	=> 'a',
						'classes'	=> 'theme-button'
					),
					array(
						'title'		=> __('Highlight','wpex'),
						'inline'	=> 'span',
						'classes'	=> 'text-highlight',
					),
				),
			),
		);

		// Merge old & new styles
		$settings['style_formats_merge'] = true;

		// Add new styles
		$settings['style_formats'] = json_encode( $new_styles );

		// Return New Settings
		return $settings;

	}
}
add_filter( 'tiny_mce_before_init', 'wpex_styles_dropdown' );

Ajout d'un simple bouton MCE

L'ajout d'un nouveau bouton à l'éditeur TinyMCE est particulièrement utile pour les shortcodes, car en tant qu'utilisateur, vous n'avez pas à vous souvenir des shortcodes, vous pouvez simplement cliquer sur un bouton et il l'insère. Je ne dis pas d'ajouter des centaines de boutons au TinyMCE pour tous vos shortcodes (je déteste quand les développeurs font ça, c'est une si mauvaise pratique et ça a l'air horrible) mais si vous en ajoutez 1 ou quelques, je laisserai passer ? Si vous souhaitez ajouter un groupe, alors vous devez créer un sous-menu comme expliqué dans la section qui suit.

Nouveau bouton WordPress MCE

Code PHP – Déclarez le nouveau plugin MCE dans WP

Ce code déclarera votre nouveau plugin MCE assurez-vous de changer l'emplacement du fichier javascript “mce-button.js” pour qu'il corresponde à l'emplacement de votre fichier (dont je vous donnerai également le code dans la sous-section suivante) comme évidemment renommer le préfixe “my” en quelque chose de plus unique !

// Hooks your functions into the correct filters
function my_add_mce_button() {
	// check user permissions
	if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
		return;
	}
	// check if WYSIWYG is enabled
	if ( 'true' == get_user_option( 'rich_editing' ) ) {
		add_filter( 'mce_external_plugins', 'my_add_tinymce_plugin' );
		add_filter( 'mce_buttons', 'my_register_mce_button' );
	}
}
add_action('admin_head', 'my_add_mce_button');

// Declare script for new button
function my_add_tinymce_plugin( $plugin_array ) {
	$plugin_array['my_mce_button'] = get_template_directory_uri() .'/js/mce-button.js';
	return $plugin_array;
}

// Register new button in the editor
function my_register_mce_button( $buttons ) {
	array_push( $buttons, 'my_mce_button' );
	return $buttons;
}

Code JS – Ajouter le bouton au MCE

Ce code js va dans le fichier js enregistré dans l'extrait ci-dessus dans la fonction “symple_shortcodes_add_tinymce_plugin”. Cela devrait ajouter un nouveau bouton de texte qui dit “Nouveau bouton” dans votre éditeur et une fois cliqué, il insérera le texte “WPExplorer.com est génial!” (bien sûr).

(function() {
	tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
		editor.addButton('my_mce_button', {
			text: 'New Button',
			icon: false,
			onclick: function() {
				editor.insertContent('WPExplorer.com is awesome!');
			}
		});
	});
})();

Ajoutez une icône personnalisée à votre nouveau bouton MCE

Ci-dessus, je vous ai montré comment ajouter un nouveau bouton qui s'affichera en tant que “Nouveau bouton” dans l'éditeur, c'est un peu boiteux… Ainsi, le code modifié vous montrera comment ajouter votre propre icône personnalisée.

Charger une feuille de style avec votre CSS

Utilisez cette fonction pour charger une nouvelle feuille de style à utiliser dans votre panneau d'administration – certains plugins/thèmes peuvent déjà ajouter une feuille de style, donc si votre thème/plugin le fait, ignorez cela et ajoutez simplement votre CSS personnalisé et modifiez le js (illustré ci-dessous) .

function my_shortcodes_mce_css() {
	wp_enqueue_style('symple_shortcodes-tc', plugins_url('/css/my-mce-style.css', __FILE__) );
}
add_action( 'admin_enqueue_scripts', 'my_shortcodes_mce_css' );

Votre CSS personnalisé

C'est le CSS pour ajouter la feuille de style chargée précédemment.

i.my-mce-icon {
	background-image: url('YOUR ICON URL');
}

Ajustez votre Javascript

Maintenant, modifiez simplement le javascript que vous avez ajouté précédemment pour supprimer le paramètre de texte et au lieu de définir l'icône sur false, donnez-lui un nom de classe personnalisé.

(function() {
	tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
		editor.addButton( 'my_mce_button', {
			icon: 'my-mce-icon',
			onclick: function() {
				editor.insertContent('WPExplorer.com is awesome!');
			}
		});
	});
})();

Ajout d'un bouton avec sous-menu

Sous-menu du bouton MCE

Plus tôt, j'ai mentionné que l'ajout d'une tonne de nouvelles icônes à la barre TinyMCE est une mauvaise idée (et c'est le cas), alors consultez le code ci-dessous pour voir comment vous pouvez modifier le javascript pour afficher un sous-menu pour votre bouton personnalisé. Si vous voulez le voir en action, consultez mon Symple Shortcodes Vidéo.

(function() {
	tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
		editor.addButton( 'my_mce_button', {
			text: 'Sample Dropdown',
			icon: false,
			type: 'menubutton',
			menu: [
				{
					text: 'Item 1',
					menu: [
						{
							text: 'Sub Item 1',
							onclick: function() {
								editor.insertContent('WPExplorer.com is awesome!');
							}
						},
						{
							text: 'Sub Item 2',
							onclick: function() {
								editor.insertContent('WPExplorer.com is awesome!');
							}
						}
					]
				},
				{
					text: 'Item 2',
					menu: [
						{
							text: 'Sub Item 1',
							onclick: function() {
								editor.insertContent('WPExplorer.com is awesome!');
							}
						},
						{
							text: 'Sub Item 2',
							onclick: function() {
								editor.insertContent('WPExplorer.com is awesome!');
							}
						}
					]
				}
			]
		});
	});
})();

Ajouter une fenêtre contextuelle à votre bouton en un clic

Dans l'exemple ci-dessus, vous remarquerez peut-être que chaque bouton insère simplement le texte “WPExplorer.com est génial!” ce qui est cool, mais qu'en est-il de la création d'une fenêtre contextuelle dans laquelle un utilisateur peut modifier ce qui est inséré dans le texte ? Alors ça ce serait gentil! Et c'est quelque chose que j'ai ajouté à la version 1.6 de mes Symple Shortcodes, rendant le plugin beaucoup plus convivial.

Fenêtre contextuelle WordPress MCE

(function() {
	tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
		editor.addButton( 'my_mce_button', {
			text: 'Sample Dropdown',
			icon: false,
			type: 'menubutton',
			menu: [
				{
					text: 'Item 1',
					menu: [
						{
							text: 'Pop-Up',
							onclick: function() {
								editor.windowManager.open( {
									title: 'Insert Random Shortcode',
									body: [
										{
											type: 'textbox',
											name: 'textboxName',
											label: 'Text Box',
											value: '30'
										},
										{
											type: 'textbox',
											name: 'multilineName',
											label: 'Multiline Text Box',
											value: 'You can say a lot of stuff in here',
											multiline: true,
											minWidth: 300,
											minHeight: 100
										},
										{
											type: 'listbox',
											name: 'listboxName',
											label: 'List Box',
											'values': [
												{text: 'Option 1', value: '1'},
												{text: 'Option 2', value: '2'},
												{text: 'Option 3', value: '3'}
											]
										}
									],
									onsubmit: function( e ) {
										editor.insertContent( '[random_shortcode textbox="' + e.data.textboxName + '" multiline="' + e.data.multilineName + '" listbox="' + e.data.listboxName + '"]');
									}
								});
							}
						}
					]
				}
			]
		});
	});
})();

C'est cool… Et maintenant ?

Bonne question! Il est maintenant temps pour vous de prendre ces ajustements géniaux et de créer quelque chose d'épique ou de mettre à jour vos plugins/thèmes pour qu'ils soient compatibles avec le nouveau TinyMCE dans WordPress 3.9. Faites-moi savoir ce que vous proposez dans les commentaires ci-dessous!

Laisser un commentaire