OnAction event on tinymce editor v6 for custom button is not working

Question

I am trying to get the click event of the tinymce custom button while building a plugin. My code snippet looks like:

const openDialog = () => editor.windowManager.openUrl({
    type: 'panel',
    title: 'Example plugin',
    url : '/vendors/tinymce/plugins/gallery/dash.html',

    buttons: [
      {
        type: 'cancel',
        text: 'Close'
      },
      {
        type: 'custom',
        text: 'Select',
        buttonType: 'primary',
        onAction: function(api) {
          const data = api.getData();
          console.log('Custom button clicked');
          /* Insert content when the window form is submitted */
          editor.insertContent('Title: ' + data.title);
          api.close();
        }
      }
    ],

Can Anyone help me with this?

I tried reading the tinymce docs where it clearly states onAction is a way to go but it is still not working

Answer 1

I've had the same issue trying to get the event from my custom button in a dialog. It seems the only way I can get it to work is by placing the onAction event handler at the dialog level and not at the button level.

 editor.addCommand('openCustomImageDialog', () => {
      editor.windowManager.open({
        title: 'Test Dialog',
        body: {
          type: 'panel',
          items: [
            {
              type: 'button',
              name: 'testButton',
              text: 'Click me',
            },
          ],
        },
        buttons: [
          {
            type: 'cancel',
            text: 'Close',
          },
        ],
        onAction: (dialogApi, details) => {
          if (details.name === 'testButton') {
            console.log('hello from my custom button');
          }
        },
      });
    });

Answer 2

tinymce.PluginManager.add("gallery", (editor, url) => {
    const openDialog = () =>
        editor.windowManager.openUrl({ // https://www.tiny.cloud/docs/ui-components/urldialog/#interactiveexample
            type: "panel",
            title: "File Explorer",
            url: '/static/tiny/gallery.html',

            buttons: [
                {
                    type: "cancel",
                    text: "Close",
                },
            ],
            onMessage : function(instance, data) {
                instance.close()
            }
        });

    /* Add a button that opens a window */
    editor.ui.registry.addButton("gallery", {
        text: "Gallery",
        onAction: () => {
            /* Open window */
            openDialog()
        },
    });

    /* Return the metadata for the help plugin */
    return {
        getMetadata: () => ({
            name: "gallery",
            url: "http://exampleplugindocsurl.com",
        }),
    };
});

Answer 3

const openDialog = () => editor.windowManager.openUrl({
    type: 'panel',
    title: 'Example plugin',
    url : '/vendors/tinymce/plugins/gallery/dash.html',

    buttons: [
      {
        type: 'cancel',
        text: 'Close'
      },
      {
        type: 'custom',
        text: 'Select',
        buttonType: 'primary',
        onAction: function(api) {
          const data = api.getData();
          console.log('Custom button clicked');
          /* Insert content when the window form is submitted */
          editor.insertContent('Title: ' + data.title);
          api.close();
        }
      }
    ],
  });

tinymce.PluginManager.add('yourparams', function(editor, url) {
  editor.addButton('your_button_name', {
    text: 'Open Dialog',
    icon: false,
    onclick: function() {
      openDialog();
    }
  });
});

TinyMCE plugin defined using tinymce.PluginManager.add(), this method add new button in editor toolbar with respect to editor.addButton() method, onclick open the OpenDialog() function when you clicked on it.