TinyMCE not working properly with ng2-modal

Question

I'm using ng2-bootstrap for my Angular 4 application: https://www.npmjs.com/package/ng2-modal

and I'm using TinyMCE editor inside the modal. Running TinyMCE editor inside bootstrap modal is a pain and I saw everyone complaining about it on online forums. Doing some research I found out that the editor will work in bootstrap modal if it is initialized after the modal is open, so this is what I did:

initialize() {
 setTimeout(() => {
  tinymce.init({
    selector: '#editor',
    plugins: ['link', 'table', 'lists'],
    skin_url: '/assets/skins/lightgray',
    toolbar: [
      'bold italic underline
    ],
    statusbar: false,
    link_context_toolbar: false,
    default_link_target: '_blank',
    link_assume_external_targets: true,
    setup: editor => {
      this.editor = editor;
      editor.on('keyup change', (e) => {
        const content = editor.getContent();
      });
    }
  });
}, 1000);
}

and I'm running this initialize after the modal is open (by calling a method on 'onOpen' event that ng2-bootstrap's modal provide). This approach works perfectly fine, but the only issue is the editor appears after 1 second, which is a really bad user experience. So how can I make sure that the initialization happens only after the modal is open (other than putting a timeout on it)?

Answer 1

That particular Github project you are using only emits 3 events so you are limited to the events it emits.

From looking at the source code the events are:

@Output()
public onOpen = new EventEmitter(false);

@Output()
public onClose = new EventEmitter(false);

@Output()
public onSubmit = new EventEmitter(false);

One of them is onOpen - if the DOM elements are there when onOpen is triggered you could run your init at that point. They key is to not run the init call until the DOM elements are available on the page.

I would note that the Git repo for that project is archived so you likely won't get any help from the repo owner if the code needs enhancements.