3

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?

4

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

        });
    });
})();
  • 1
    +1 for editor.insertContent(...). I was trying with ed.execCommand('mceInsertContent', '[live-chat-button]'); which was not working and I was getting a bunch of console errors. ed.insertContent('[live-chat-button]'); worked for me and placed the shortcode in editor. On the page I can also see the actual content of my shortcode :) Wish I could find this before I posted my question at stackoverflow.com/questions/44105383/…! – Subrata Sarkar May 22 '17 at 6:20
  • I have answered to your question. Please accept my answer, as it helped you :) @SubrataSarkar – mukto90 May 23 '17 at 8:34
  • I don't find a way to "accept". I can only upvote, which I did already for you previous post. – Subrata Sarkar May 23 '17 at 8:39
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.

  • 2
    Answers should be more than links. Please file an edit and add all relevant detail inside your answer. Thank you :-) – Pieter Goosen Apr 13 '15 at 17:59
  • I thought recommending a plugin that can help would be useful... Why does that get negative points? – a4jp.com Apr 13 '15 at 18:00
  • 1
    Please read How to Answer. Pay attention to the section Provide context for links :-) – Pieter Goosen Apr 13 '15 at 18:04
  • 1
    Then you should take your time and read through the help center section. That will help you a lot in future. And as I stated in another comment, never let downvotes break you, they are just an indication how useful others find your post. Downvotes gives you the opportunity to rectify or better a post, and most importantly, downvotes can be removed with proper editing. – Pieter Goosen Apr 13 '15 at 18:50
  • 1
    I just added a working sample of code. Hopefully that gets rid of the negative points here. – a4jp.com Apr 15 '15 at 1:12
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.