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.

UI/UX Design by

We make sure that your target audience has the best possible experience with your digital product. You get:

• Design tailored to your audience
• Proven processes customized to your needs
• An expert team of experienced designers

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.