Read more

How to build a fully custom TinyMCE 5 dialog

Judith Roth
December 23, 2020Software engineer at makandra GmbH

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',
    });
  }

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

  2. 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.

Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show archive.org snapshot

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.

Judith Roth
December 23, 2020Software engineer at makandra GmbH
Posted by Judith Roth to makandra dev (2020-12-23 11:18)