Aller au contenu

Advanced Editor Tools (TinyMCE) - Utiliser l'éditeur classique de WordPress dans des blocs

Ce plugin "Advanced Editor Tools" ajoute un bloc "Classic Paragraph", qui permet d'utiliser l'éditeur classique au milieu des blocs WordPress.

Anciennement appelé "TinyMCE Advanced", ce plugin est une relique de l'époque à laquelle WordPress utilisait le Classic Editor pour la mise en page.

Ajouter un bouton personnalisé à TinyMCE

A l'époque à laquelle WordPress utilisait encore le Classic Editor, on pouvait installer TinyMCE, qui ajoutait des options de mise en page.

Pour un projet spécifique, j'avais trouvé comment ajouter un bouton à la barre d'outils TinyMCE. Voici le code qui date de 2018, pour archives.

Le PHP pour functions.php

Note : la fonction get_stylesheet_directory_uri() retourne l'URL du thème enfant.

PHP28 lignes
/*************** ajoute TinyMCE bouton ********************/
// Filter Functions with Hooks
function custom_mce_button() {
   // Check if user have permission
   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', 'custom_tinymce_plugin' );
      add_filter( 'mce_buttons', 'register_mce_button' );
   }
}
add_action('admin_head', 'custom_mce_button');

// Function for new button
function custom_tinymce_plugin( $plugin_array ) {
   $plugin_array['custom_mce_button1'] = get_stylesheet_directory_uri() .'/tinymce_bouton1.js';
   $plugin_array['custom_mce_button2'] = get_stylesheet_directory_uri() .'/tinymce_bouton2.js';
   return $plugin_array;
}
// Register new button in the editor
function register_mce_button( $buttons ) {
   array_push( $buttons, 'custom_mce_button1' );
   array_push( $buttons, 'custom_mce_button2' );
   return $buttons;
}
/************** Fin ajoute TinyMCE button *****************/

Et le Javascript

JavaScript11 lignes
(function() {
   tinymce.PluginManager.add('custom_mce_button1', function(editor, url) {
      editor.addButton('custom_mce_button1', {
      text: 'Showhide EN',
      icon: false,
      onclick: function() {
      editor.insertContent('[mon_shortcode mon_attr="toto" autre_attr="tata"][/mon_shortcode ');
   }
});
});
})()

C'est une vieille archive - si ça marche pour vous, tant mieux, sinon, vous pouvez poster une meilleure solution en commentaires.

Auteur : Jean-Noël Mathonnet

Commentaires

Pas encore de commentaire. Soyez le premier !

Laisser un commentaire

Lorsque vous achetez via des liens sur ce site, nous pouvons toucher une commission d'affiliation. + d'infos