search

tinymce / tinymce-vue

Official TinyMCE Vue component
MIT License
2.08k stars 208 forks source link

TinyMCE not working when editor is inside bootstrap modal #404

Closed Datalink-Wouter closed 4 months ago

Datalink-Wouter commented 8 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 5 months 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?

tiny-stale-bot commented 4 months ago

This issue is stale because it has been open 30 days with no activity. Please comment if you wish to keep this issue open or it will be closed in 7 days.

tiny-stale-bot commented 4 months ago

This issue was closed because it has been stalled for 7 days with no activity.