Medium-editor: How to use medium-editor with modal bootstrap

[vominhtam]

Hi all,

I have a issue when using with modal boostrap. When I click all button (B,I) all event not working
I don't know how to fix it. please help me?

Thank all so musch

[paltman]

same here

[leotiger]

@vominhtam, @paltman.

I had the same problem. Please check several things of your modal configuration, there are several incompatible settings:

• data-backdrop set to static
• data-keyboard set to false
• tabindex set to "-1"

To solve the different issues I removed the three attributes from the modal tag.

Moreover I had to add a special instruction to fix the link popup:

.medium-editor-toolbar-form-active {
visibility: visible;
}

You may configure this dynamically via javascript, if you're modal does not contain a medium editor instance you may activate these settings or vice-versa.

Related issues: #284, #1222 and more. Just search for modal in the issues and you'll find several hints.

[nchase]

@vominhtam @paltman does leotiger's suggestion resolve your issue?

[marcosignacio]

Yep, removing those 3 parameters and adding that css rule fixes this issue.

Thanks!

[dbachet]

Hi, just for the record, I tried many rich text editors using contenteditable=true and every of them wouldn't work properly when it comes to action buttons. I tried medium-editor lastly and moving it outside the modal worked properly.

So I assume that the modal issue might be linked with the contenteditable thing but I might be wrong.

Personally I just removed tabindex="-1" from the modal class element it worked! Using Bootstrap 4 modal.

[srknzl]

How to remove that property effectively? @dbachet
Update:
Got it worked with setting

"no-enforce-focus"
Warning: Setting this is not good for accesibility set it accordingly.
I use bootstrap-vue. Here is the documentation https://bootstrap-vue.js.org/docs/components/modal/