search

tinymce / tinymce-vue

Official TinyMCE Vue component
MIT License
2.01k stars 202 forks source link

TinyMCE not working when editor is inside bootstrap modal #404

Open Datalink-Wouter opened 4 months ago

Datalink-Wouter commented 4 months ago

What is the current behavior? When you place tinymce inside a bootstrap (5.3) modal and try to insert media (which shows another modal with the media info) you cannot focus on the input fields. When you hide the bootstrap modal (display:none on the .modal element) you can enter text in the tinymce input fields again.

What is the expected behavior? TinyMCE should be usable inside a bootstrap modal

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE or tinymce-vue? YinyMCE: 6.8.3 Vue: 3.4.21 Bootstrap: 5.3.3

Does anyone happen to have a workaround for this?

dreykanbern commented 3 weeks ago

Hi, this problem is true for all popup wrappers.

The thing is that by default TinyMCE creates an auxiliary wrapper in DOM (<div class=“tox tox tox-silver-sink tox-tinymce-aux” style=“position: relative;”></div>) at body level for popups, and fills it at editor.on('OpenWindow') event. If you move it to the popup level, everything works correctly.

Now I'm trying to solve this problem, can you share the solution?