Tinymce-vue dialog unable to edit in bootstrap-vue modal.

[asika32764]

See https://codesandbox.io/s/tinymce-vue-bootstrap-vue-modal-focusin-zxfjn

Use official workaround for bootstrap-vue modal not works. The Tinymce dialog are not editable.

// Prevent Bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
  if ($(e.target).closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) {
    e.stopImmediatePropagation();
  }
});

Seems works with native Bootstrap 4 https://codesandbox.io/s/bootstrap-tinymce-mxi9f

The issue also post at tinymce/tinymce-vue#116

[gettingclouded]

Here's the pure Javascript version of the workaround.

document.addEventListener('focusin', function (e) {
     let closest = e.target.closest(".tox-tinymce-aux, .tox-dialog, .moxman-window, .tam-assetmanager-root");
     if (closest !== null && closest !== undefined) {
          e.stopImmediatePropagation();
     }
});

[tmorehouse]

You could also try wrapping the MCE editor in a div with a focusin listener that stops upwards bubbling:

<div @focusin.stop>
  <!-- MCE editor placed here -->
</div>

[jacobmllr95]

Setting the no-enforce-focus option works:
https://codesandbox.io/s/bootstrapvue-tinymce-vue-modal-focusin-kxhvm