Cross Browser Issue in Bootstrap Modal

[stevetrader]

Description

Using medium-editor inside a Bootstrap modal, the changes do not take affect in Chrome. Works fine in Safari.

Steps to reproduce

1. Use this generic fiddle for testing. https://jsfiddle.net/he2nnuhf/5/
2. Tests without modal work fine in any browser.
3. Use the modal button to test inside the modal. Changes (bold for example) take affect just fine in Safari, Chrome does not work.

Expected behavior: Changes take affect in all browsers

Actual behavior: Chrome does not work.

Link to an example: https://jsfiddle.net/he2nnuhf/5/

Versions

• medium-editor: 5.22.0
• browser: Chrome 53.0.2785.116 & Safari 10.0 (12602.1.50.0.10)
• OS: MacOS Sierra

[manuel-di-iorio]

+1 Same issue for me. Not compatible with bootstrap modals

Workaround:

new MediumEditor('.angular-medium-editor');
new MediumEditor('.angular-medium-editor');

Instantiate two times using the class angular-medium-editor or it will not work, but be aware that this will use more CPU and may expect problems if you have more than one editor on a single page, waiting for an official fix

[ryanaverill]

+1

[marco-fp]

+1 Same issue for me.

[yodharox]

+1 Same issue for me

[essevidotto]

+1 Same for me
Any update on this? this is a huge drawback :(

[marco-fp]

I ended up writting a "custom modal" imitating bootstrap style. Kinda dirty but it worked.

[ThomasBenoist]

Removing tabindex=-1 from your modal fix the issue but is kinda dirty.

You could try using 'elementsContainer' option to specify which element should contain the medium-editor (the modal for example), with this last solution, the toolbar won't be displayed anymore for siblings/parents elements.

[nmielnik]

Potentially related issues: #1121 + #857

[MirkoMignini]

+1 for me, as temporary fix the solution by @ThomasBenoist works

[rluetke]

That fixed it for me: Use elementsContainer to attach the Medium-Editor's toolbar to the modal node. @ThomasBenoist pointed in this direction.

Here is my example with #pages_edit_dialog as id of the modal-div and jQuery:

   $("#pages_edit_dialog").on('shown.bs.modal', function () {
      var editor = new MediumEditor('#page_leadtext_editable', {
          elementsContainer: this,
          toolbar: {
              buttons: ['bold', 'italic', 'underline', ...

I first thought that using a textarea instead of an editable div broke the toolbar but it was the wrong node for the editor (Default: document.body).