How to build a fully custom TinyMCE 5 dialog

TinyMCE Show archive.org snapshot is a WYSIWYG editor which is quite customizable.

1. Add a custom button to the tinyMCE toolbar Show archive.org snapshot and tell tinyMCE to open a dialog Show archive.org snapshot with the route to your dialog's view.

tinymce.init({
  // ...
  toolbar: 'myCustomButton',
  setup: function(editor) {
      editor.ui.registry.addButton('myCustom Button', {
        icon: 'document-properties',
        tooltip: 'Further describe your button here',
        onAction: openMyCustomDialog,
      });
    },
  }

  function openMyCustomDialog () {
    editor.windowManager.openUrl({
      title: 'My Custom Dialog',
      url: '/path/to/screen/for/dialog',
    });
  }

2. Implement the form inputs or whatever you need on your dialog's view.

3. Add buttons in you view to interact with the tinyMCE editor or close the dialog. The easiest way to interact with the editor is via javascript postMessages.

To abort the dialog a post message on click with an event listener like this is enough (implemented with an Unpoly compiler Show archive.org snapshot ):

up.compiler('[custom-dialog-abort]', (element) => {

  element.addEventListener('click', (event) => {
    event.preventDefault()

    window.parent.postMessage({
      mceAction: 'close'
    });
  })

})

The compiler for a button that inserts links and content based on user input and then closes the dialog could look like this:

up.compiler('[link-builder-button]', (element, { formSelector }) => {

  const form = up.element.first(formSelector)

  element.addEventListener('click', (event) => {
    event.preventDefault()

    let linkTag = buildLinkTag(form)
    if (linkTag == null) return

    window.parent.postMessage({
      mceAction: 'insertContent',
      content: linkTag,
    });

    window.parent.postMessage({
      mceAction: 'insertContent',
      content: ' ',
    })

    window.parent.postMessage({
      mceAction: 'close'
    });


  })

  function buildLinkTag(form) {
    // do stuff
  }
})

See here Show archive.org snapshot for more commands.