Add button in TinyMCE editor to insert text

Question

I'm searching a way to add a custom button to the TinyMCE editor when clicked insert into the visual editor some text.

For example: button called "Hi" when clicked insert into the editor "Hello I'm <B>Mark</b>!"

Is it possible? And how?

Answer 1

Add this to your plugin file or in functions.php file in the theme directory

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;
}

And this is your custom-tinymce.js file

(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>!');
            }

        });
    });
})();

Answer 2

If you do want to make a button from scratch try using this 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>

This snippet plugin (electricg/tinymce-snippet-plugin) might be useful if you just quickly want to add custom buttons with drop downs without coding so much.

You can also look inside the plugin to make a high level system if you are interested.

Answer 3

Try this :

Add this code to functions.php file.

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;
}

Create .js file and replace you path/location of js file in below code:

    (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 );
})();