How to add a custom button to the TinyMCE Editor?

SuiteCRM Forum - English Language Developer Collaboration
,
1

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() {
                tinymce.activeEditor.formatter.toggle('custom_format')
            }
        });

right after

  editor.on('focus', function(e){
                        onClickTemplateBody();
                    });

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.

2

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

cache/themes
cache/smarty
cache/modules

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
3

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.

{
    "convert_urls":false,
    "valid_children":
    "+body[style]",
    "height":300,
    "width":"100%",
    "theme":"advanced",
    "theme_advanced_toolbar_align":"left",
    "theme_advanced_toolbar_location":"top",
    "theme_advanced_buttons1":"code,separator,bold,italic,underline,separator,formatselect,fontselect,fontsizeselect,",
    "theme_advanced_buttons2":"",
    "theme_advanced_buttons3":"",
    "strict_loading_mode":true,
    "mode":"exact",
    "language":"en",
    "plugins":"advhr,insertdatetime,table,preview,paste,searchreplace,directionality",
    "elements":"description",
    "extended_valid_elements":"style[dir|lang|media|title|type],hr[class|width|size|noshade],@[class|style]",
    "content_css":"include\/javascript\/tiny_mce\/themes\/advanced\/skins\/default\/content.css",
    "directionality":"ltr",

    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.

4

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

"theme_advanced_buttons1":"code,separator,bold,italic,underline,separator,formatselect,fontselect,fontsizeselect,mybutton",

This fixed the issue :slight_smile:

Still need to clean up though.