TinyMCE how to add a custom toolbar button?

Explains how to add custom button to Tinymce visual editor.

 

Posted: February 18, 2019. | By: mustafa

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

 

tinymce.init({
 selector: 'textarea#add-custom-button',
 plugins: 'code wordcount',
 toolbar: 'undo redo | currentdate',
 content_css: [
 '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
 '//www.tiny.cloud/css/codepen.min.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

 


related posts

Back to top