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(' <a href="google.com" id="btnPurchaseBox" >Make google search</a> '); } }); } });
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