Disable TinyMCE link modal: TinyMCE

Question

I'm using TinyMCE as a text editor for my application. But, the 'link' toolbar opens up a modal, which I don't really like: see below:

Is there a way to disable this link modal? and maybe use a dropdown with similar options?

Here is what my tinymce.init() looks:

tinymce.init({
  selector: '#test',
  plugins: ['link', 'table', 'lists', 'advlist'],
  skin_url: '/assets/skins/lightgray',
  toolbar: [
    'bold italic underline strikethrough | bullist numlist | link'
  ],
  statusbar: false,
  menubar: false,
  link_context_toolbar: true,
  setup: editor => {
    this.editor = editor;
    editor.on('keyup change', (e) => {
      const content = editor.getContent();
    });
  }
}); 

Answer 1

There's not really any way to disable the link modal, per se - it's baked into the link plugin menu button. You'll need to write your own button that invokes a dropdown that hooks into the link plugin.

You can read more about adding custom buttons here: https://www.tinymce.com/docs/demo/custom-toolbar-button/