Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed

Comments

@asika32764
Copy link

@asika32764 asika32764 commented Dec 30, 2019

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
Copy link

@gettingclouded gettingclouded commented Jan 23, 2020

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
Copy link
Member

@tmorehouse tmorehouse commented Jan 23, 2020

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
Copy link
Member

@jacobmllr95 jacobmllr95 commented Jan 30, 2020

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

jacobmllr95 added a commit that referenced this issue Jan 31, 2020
#4702)

* feat(b-modal): add `ignoreEnforceFocusSelector` prop

* Update modal.js

* Update modal.js

* Update modal.spec.js

* Update package.json

* Update package.json

* Update modal.js

* Update README.md

* Update package.json

Co-authored-by: Troy Morehouse <troymore@nbnet.nb.ca>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment