Ajout d’un bouton pour déclencher un fragment de code HTML dans l’éditeur tinyMCE via jQuery

Je travaille sur l’ajout d’un bouton à la barre d’outils de l’éditeur Tinymce dans une application qui va coller dans le code html d’une table de contenu personnalisée pour le contenu de l’éditeur.

Par exemple, pour chaque balise de niveau h (h1-h3) trouvée dans l’éditeur, j’aimerais insérer un extrait de code html (un div contenant la table des matières *) tout en collant une balise de commentaire dans le balisage source juste avant la table des matières fragment HTML.

Quelqu’un peut-il suggérer un exemple de didacticiel sur la manière d’interagir avec l’API tinyMCE afin d’append un bouton à l’éditeur qui déclenche une fonction jQuery locale pour interagir avec le contenu de l’éditeur?

Mon fragment html sera:

J’essaie juste de vous expliquer comment append un bouton dans l’éditeur WordPress tinyMCE et insérer du contenu dans l’éditeur à l’aide de ce bouton. Au bas de cette réponse, j’ai fourni le lien de mon plugin, vous pouvez le télécharger directement et voir la source.

Le code suivant est directement copié depuis l’un de mes plugins WordPress que j’ai développé pour append un shortcode à l’éditeur à l’aide d’un button personnalisé. Cet extrait de code va au fichier functions.php

 add_action( 'init', 'my_js_fiddle_init'); function my_js_fiddle_init() { if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) { return; } if ( get_user_option('rich_editing') == 'true' ) { // call the add_plugin function to register the plugin(js) for tinyMCE add_filter( 'mce_external_plugins', 'add_plugin' ); // call the function register_button to add a new button in the editor add_filter( 'mce_buttons', 'register_button' ); } } function register_button($buttons) { array_push( $buttons, "|", "wpjsfiddle" ); return $buttons; } function add_plugin($plugin_array) { //$plugin_array['wpjsfiddle'] = plugins_url('js/wp_js_fiddle.js', __FILE__ ); $plugin_array['wpjsfiddle'] ="tinyMCE_plugin_file"; return $plugin_array; } 

Ceci est votre plugin tinyMCE , créez un fichier js et placez le code dans ce fichier. Par exemple, vous pouvez le nommer tinyMCE_plugin_file.js . J’ai utilisé ce nom dans la fonction add_plugin .

 (function() { tinymce.create('tinymce.plugins.wpjsfiddle', { init : function(ed, url) { ed.addButton('wpjsfiddle', { title : 'Insert Js Fiddle', image : url+'/images/jsfiddle-icon.png', onclick : function() { var contentToInsert='this line will be inserted'; // change this ed.execCommand('mceInsertContent', false, contentToInsert); } }); }, createControl : function(n, cm) { return null; }, getInfo : function() { return { longname : "Wp Js Fiddle", author : 'Sheikh Heera', authorurl : 'http://heera.it', version : "1.0" }; } }); tinymce.PluginManager.add('wpjsfiddle', tinymce.plugins.wpjsfiddle); })(); 

Aussi, vous pouvez télécharger mon plugin à partir du répertoire du plugin WordPress et vérifier le code source. J’espère que ça aide un peu.