How to add a custom button to the TinyMCE Editor?

Hi, I would like to add a custom button to the TinyMCE Editor. When the user is going to hit the new icon (or even text) a predefined content supposed to be added to the textarea.

My approach was to add following snippet to the getSuiteSettings($html, $width) function in include/SuiteEditor/SuiteEditorConnector.php

          editor.addButton('mybutton', {
            text: 'My Button',
            icon: false,
            onclick: function() {

right after

  editor.on('focus', function(e){

But the button does not show up. What am I doing wrong? Can anyone point me in the right direction? Any help is much appreciated. Thanks.

Start by checking if your new code is reaching the browser. If not, you might need to be a bit more aggressive clearing server-side caches. Look for specific things under


If it is reaching the browser,

  • check for any errors in the Developer console
  • if there are no errors, review the TinyMCE docs to see what you should be doing instead

Thanks for your tips but this seems to be not the problem.

I learned that SuiteEditorConnector::getSuiteSettings($html, $width) doesn’t get hit at all (in my case).

The correct file where the magic happens seem to be /include/SugarTinyMCE.php

But even when I replace {$jsConfig} in line #160 with following code the new button does not show up in the editor. Adding a console.log({$jsConfig}) confirms me that I am looking at the right place.


    setup: function(editor) {
    editor.addButton('mybutton', {
      text: "Hello world",
      onclick: function() {
        alert('Hi SuiteCRM');

But according TinyMCE Docs thats the correct way to add a custom button.

I finally found the solution. I need to add the new button also to the toolbar.


This fixed the issue :slight_smile:

Still need to clean up though.