search

yabwe / medium-editor

Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.
https://yabwe.github.io/medium-editor/
Other
16.06k stars 1.85k forks source link

How to use medium-editor with modal bootstrap #1360

Open vominhtam opened 7 years ago

vominhtam commented 7 years ago

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 commented 7 years ago

same here

leotiger commented 6 years ago

@vominhtam, @paltman.

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

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 commented 6 years ago

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

marcosignacio commented 5 years ago

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

Thanks!

dbachet commented 5 years ago

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 commented 4 years ago

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/

rluetke commented 2 years ago

Find my solution with changing elementsContainer in #1222