web-dev-qa-db-fra.com

Bouton Ajouter dans l'éditeur TinyMCE pour insérer du texte

Je cherche un moyen d'ajouter un bouton personnalisé à l'éditeur TinyMCE lorsque l'utilisateur clique dessus, insérer du texte dans l'éditeur visuel.

Par exemple: bouton appelé "Bonjour" lorsque vous cliquez dessus, insérez-le dans l'éditeur "Hello I'm <B>Mark</b>!"

C'est possible? Et comment?

wp-admintinymcevisual-editor
3
Pepozzo

Ajoutez ceci à votre fichier de plugin ou au fichier functions.php dans le répertoire du thème 

add_action( 'admin_enqueue_scripts', 'wpse_141344_admin_enqueue_scripts' );
add_action( 'admin_head', 'wpse_141344_add_mce_button' );

function wpse_141344_admin_enqueue_scripts() {
    wp_enqueue_script( 'wpse_141344-tinymce-scipt', 'url/to/your/custom-tinymce.js' );
}

function wpse_141344_add_mce_button() {
    if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
        return;
    }
    add_filter( 'mce_external_plugins', 'wpse_141344_add_tinymce_plugin' );
    add_filter( 'mce_buttons', 'wpse_141344_register_mce_button' );
}

function wpse_141344_add_tinymce_plugin( $plugin_array ) {
    $plugin_array['wpse_141344_tinymce_button'] = 'url/to/your/custom-tinymce.js';
    return $plugin_array;
}

function wpse_141344_register_mce_button( $buttons ) {
    array_Push( $buttons, 'wpse_141344_tinymce_button' );
    return $buttons;
}

Et ceci est votre fichier custom-tinymce.js

(function() {
    tinymce.PluginManager.add('wpse_141344_tinymce_button', function( editor, url ) {
        editor.addButton( 'wpse_141344_tinymce_button', {
            // image : 'url/to/an/icon', // optional
            text : 'Hi',
            title : 'Hi',
            onclick: function() {
                editor.insertContent('Hello I\'m <B>Mark</b>!');
            }

        });
    });
})();
4
mukto90

Si vous voulez créer un bouton à partir de zéro, essayez d’utiliser ce code:

<script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    toolbar: "mybutton",
    setup: function(editor) {
        editor.addButton('mybutton', {
            type: 'menubutton',
            text: 'My button',
            icon: false,
            menu: [
                {text: 'Hi', onclick: function() {editor.insertContent('Hello I am <B>Mark</b>');}},
                {text: 'Insert text item 2', onclick: function() {editor.insertContent('It is a beautiful day');}}
            ]
        });
    }
});
</script>

<form method="post" action="somepage">
    <textarea name="content" style="width:100%"></textarea>
</form>

Ce plugin snippet (electricg/tinymce-snippet-plugin) peut être utile si vous souhaitez simplement ajouter rapidement des boutons personnalisés avec des menus déroulants sans trop coder.

Vous pouvez également regarder à l'intérieur du plugin pour créer un système de haut niveau si cela vous intéresse.

2
a4jp.com

Essaye ça :

Ajoutez ce code au fichier functions.php.

add_action( 'init', 'droid_buttons' );
function droid_buttons() {
    add_filter( "mce_external_plugins", "droid_add_buttons" );
    add_filter( 'mce_buttons', 'droid_register_buttons' );
}

function droid_add_buttons( $plugin_array ) {
    $plugin_array['droid'] = get_template_directory_uri() . '/text-button.js';
    echo get_template_directory_uri();
    return $plugin_array;
}

function droid_register_buttons( $buttons ) {
    array_Push( $buttons, 'droid_title'); // droid_title
    return $buttons;
}

Créez le fichier .js et remplacez le chemin/emplacement du fichier js dans le code ci-dessous:

    (function() {
    tinymce.create('tinymce.plugins.Droid', {
    init : function(ed, url) {
    ed.addButton('droid_title', {
    title : 'Droid Title',
    cmd : 'droid_title',
    image : ''
    });

    ed.addCommand('droid_title', function() {
    var selected_text = ed.selection.getContent();
    var return_text = "";
    return_text = '<span class="droid_title">Hello I\'m <B>Mark</b>!</span>'; 
    ed.execCommand('mceInsertContent', 0, return_text);
    });

    },

    });

    // Register plugin
    tinymce.PluginManager.add( 'droid', tinymce.plugins.Droid );
})();
0
Bindiya Patoliya