Le petit plugin suivant crée un bouton personnalisé à l'intérieur de la ligne 1 de WordPress TinyMCE version 4, testé dans WP version 3.9-beta2.
Le plugin a var_dump
inclus pour comprendre les valeurs. Il est également possible d'ajouter le bouton à d' autres lignes de l'éditeur visuel, seul un autre crochet, comme pour la ligne 2: mce_buttons_2
.
Résultat
Plugin, côté PHP - tinymce4-test.php
<?php
/**
* Plugin Name: TinyMCE 4 @ WP Test
* Description:
* Plugin URI:
* Version: 0.0.1
* Author: Frank Bültge
* Author URI: http://bueltge.de
* License: GPLv2
* License URI: ./assets/license.txt
* Text Domain:
* Domain Path: /languages
* Network: false
*/
add_action( 'admin_head', 'fb_add_tinymce' );
function fb_add_tinymce() {
global $typenow;
// Only on Post Type: post and page
if( ! in_array( $typenow, array( 'post', 'page' ) ) )
return ;
add_filter( 'mce_external_plugins', 'fb_add_tinymce_plugin' );
// Add to line 1 form WP TinyMCE
add_filter( 'mce_buttons', 'fb_add_tinymce_button' );
}
// Inlcude the JS for TinyMCE
function fb_add_tinymce_plugin( $plugin_array ) {
$plugin_array['fb_test'] = plugins_url( '/plugin.js', __FILE__ );
// Print all plugin JS path
var_dump( $plugin_array );
return $plugin_array;
}
// Add the button key for address via JS
function fb_add_tinymce_button( $buttons ) {
array_push( $buttons, 'fb_test_button_key' );
// Print all buttons
var_dump( $buttons );
return $buttons;
}
Script, côté JavaScript - plugin.js
( function() {
tinymce.PluginManager.add( 'fb_test', function( editor, url ) {
// Add a button that opens a window
editor.addButton( 'fb_test_button_key', {
text: 'FB Test Button',
icon: false,
onclick: function() {
// Open window
editor.windowManager.open( {
title: 'Example plugin',
body: [{
type: 'textbox',
name: 'title',
label: 'Title'
}],
onsubmit: function( e ) {
// Insert content when the window form is submitted
editor.insertContent( 'Title: ' + e.data.title );
}
} );
}
} );
} );
} )();
Essentiel
Utilisez le Gist bueltge / 9758082 comme référence ou téléchargez-le. Le Gist a également plus d'exemples pour différents boutons dans TinyMCE.
Liens
Et, si vous souhaitez avoir un bouton d'icône réel, vous pouvez utiliser des tirets ou votre propre police d'icône pour cela.
Créez un fichier CSS et mettez-vous en file d'attente côté administrateur;
Fondamentalement pris directement du noyau.
la source
La méthode simple pour ajouter un bouton
1) AJOUTEZ CE CODE DANS FUNCTIONS.PHP OU DANS LE PLUGIN
2) Créez 1_button.php dans le dossier cible et insérez ce code (notez, changez les URL "wp-load" et "ButtonImage.png" !!!)
la source