No way to create custom toolbar button

[kahanu]

Is there no way to create a custom toolbar button as described here https://www.tiny.cloud/docs/demo/custom-toolbar-button/?

If I try to add the setup function to the config object, the editor.ui property is undefined.

  config: any = {
    height: 250,
    theme: 'modern',
    plugins: 'print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image imagetools link media template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists textcolor wordcount contextmenu colorpicker textpattern',
    toolbar: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',
    image_advtab: true,
    imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
    templates: [
      { title: 'Test template 1', content: 'Test 1' },
      { title: 'Test template 2', content: 'Test 2' }
    ],
    content_css: [
      '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
      '//www.tinymce.com/css/codepen.min.css'
    ],
    setup: function (editor) {
      editor.ui.registry.addButton('customInsertButton', {
      text: 'My Button',
      onAction: function (_) {
        editor.insertContent('&nbsp;<strong>It\'s my button!</strong>&nbsp;');
      }
    });
    }
  };

Is it possible to create a custom toolbar button?

[cipchk]

try:

-  setup: function (editor) {
+  setup: (editor) => {

[kahanu]

The type of function, whether standard or fat arrow, is not the issue. The problem is that the addButton method is now in the ui.registry namespace which does not seem to be accessible in your project.

I forked your Stackblitz example to show you what I mean.

https://stackblitz.com/edit/ngx-tinymce-uac1n2

  config: any = {
    height: 250,
    ...
    setup: (editor) => {
      editor.ui.registry.addButton('customInsertButton', {
        text: 'My Button',
        onAction: function (_) {
          editor.insertContent('&nbsp;<strong>It\'s my button!</strong>&nbsp;');
        }
      });
    }
  };

This results in this error:

ERROR
Error: Cannot read property 'registry' of undefined

Is there a way to get this to work? I've looked at your source code and it seems your editor property does not include the ui property.

[cipchk]

You can try using latest version of tinymce via forRoot, lisk this:

NgxTinymceModule.forRoot({
	baseURL: 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.7.1/',
})

[jurgendl]

addMenuButton instead of addButton (in version 5.0.15 of tinymce)