Custom buttons in tinyMCE 6.x to insert custom html

Viewed 46

I have what I want working in tinyMCE v4.x, but am really styruggling to update the code to work with the latest version (6.x) of this editor.

Basically, my custom button opens a new (popup) window (passing various arguments) in which the user can do various things which produces some HTML, and this is then pasted back into the tinyMCE editor window (at the current insertion point) via editor.insertContent([whatever]);

Here's my v4 code to add the button to the editor toolbar:

   editor.addButton('myButton', {
      text: 'XYZ',
      tooltip: 'Do something',
      icon: false,
      onclick: function () {
         editor.windowManager.open({
            title: 'XYZ',
            url: 'mypopuppage.html',
            width: 800,
            height: 600
         }, { 
            arg0: '0',
            arg1: '1',
            arg2: editor.selection.getContent({ format: 'html' }),
            arg3: '',
            arg4: ''
         });
      }
   });
});

As I say, this is fine - it works. For v6 I've tried, but can't get it to work. I have not managed to find any code examples online that do anything similar for tinyMCE v6.x, though I'm sure there must be some... this is my effort, but clearly requires more, as it doesn;t work - the button shows, but nothing happens when I click it:

         selector: "textarea#txtA",
         menubar: false,
         statusbar: false,
         plugins: "myButton",
         setup: (editor) => {
            editor.ui.registry.addButton('myButton', {
               text: 'XYZ',
               onAction: (_) =>  {
                  editor.windowManager.open({
                     title: 'XYZ',
                     url: 'mypopuppage.html',
                     width: 800,
                     height: 600
                  }, {
                     arg0: '0',
                     arg1: '1',
                     arg2: editor.selection.getContent({ format: 'html' }),
                     arg3: '',
                     arg4: ''
                  });
               }
            });
        },
        toolbar1: "myButton"
     });

Any help gratefully received...

[edit] OK - getting there; silly me: I should use

editor.windowManager.openUrl({

to open the dialog... now I just have to figure out how to send the HTML back to the editor...

..not sure I'm passing my arguments corectly for this version of tinyMCE... or not reading them correctly on the popup page. In v4x I could use

var args = top.tinymce.activeEditor.windowManager.getParams();

but this doesn't seem to work with v6x... I can use a workaorund of passing the arguments as parameters in the URL I call, but I suspect there is a more robust way of doing it as per v4x - damned if I can find it though... that asied, I'm just about there now :)

0 Answers
Related