TinyMCE how to add a custom toolbar button?

In this article I have explain how to simply add a custom toolbar button to the TinyMCE Visual Editor. 


 selector: 'textarea#add-custom-button',
 plugins: 'code wordcount',
 toolbar: 'undo redo | currentdate',
 content_css: [

setup: function (editor) {

editor.addButton('my-custombtn', {//add button name to toolbar
 text: 'My Custom Insert Button',
 tooltip: 'Insert html text on click.',
 onclick: function() {
 editor.insertContent('&nbsp;<a href="google.com" id="btnPurchaseBox" >Make google search</a>&nbsp;');


Add button options - button configuration properties:

  • text - the text that will show up on the button
  • icon - CSS class for the icon (from one of the loaded stylesheets)
  • image - URL of the image (16x16 recommended) to use as an icon (overrides icon option if defined)
  • tooltip - tooltip to pop up on hover
  • onclick - callback to call when button is clicked
  • onpostrender - callback to call when button is rendered


Back to top