javascript - TinyMCE doesn't work within Bootstrap 5 modal - Stack Overflow

IT技术

更新时间：2025-04-040

admin管理员组
文章数量:1343915

hope you'll be able to help me
so here is my problem:
I would like to integrate a TinyMCE editor in a Bootstrap 5 modal
But the problem is that in TinyMCE modals (for example link modal), I'm unable to edit the input. Here is my code:

    <script src=".5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    <script src=".7.1/tinymce.min.js" integrity="sha512-RnlQJaTEHoOCt5dUTV0Oi0vOBMI9PjCU7m+VHoJ4xmhuUNcwnB5Iox1es+skLril1C3gHTLbeRepHs1RpSCLoQ==" crossorigin="anonymous"></script>
    <script src=".7.1/plugins/link/plugin.min.js" integrity="sha512-itGgetRaXe7QX3rkrGYJyUR6heF0LMLMU97a5lpiVRlPESh0xbMkD+7L+ScFuiQf+Wg1PEeKmvmABXvMOUVuxw==" crossorigin="anonymous"></script>
    <link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <body>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
             Launch demo modal
        </button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <textarea></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
        <script>
        tinymce.init({
                selector: 'textarea',
                menubar: false,
                height: '400',
                plugins: 'link',
                toolbar: 'link'
        });
        </script>
    </body>

You may tell me to do this: /docs/integrations/bootstrap/
I already tried this solution, I did some tests and it only fix the problem up to Bootstrap V4.7.
I really hope you'll be able to help me, see you :)

hope you'll be able to help me
so here is my problem:
I would like to integrate a TinyMCE editor in a Bootstrap 5 modal
But the problem is that in TinyMCE modals (for example link modal), I'm unable to edit the input. Here is my code:

    <script src="https://code.jquery./jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare./ajax/libs/tinymce/5.7.1/tinymce.min.js" integrity="sha512-RnlQJaTEHoOCt5dUTV0Oi0vOBMI9PjCU7m+VHoJ4xmhuUNcwnB5Iox1es+skLril1C3gHTLbeRepHs1RpSCLoQ==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare./ajax/libs/tinymce/5.7.1/plugins/link/plugin.min.js" integrity="sha512-itGgetRaXe7QX3rkrGYJyUR6heF0LMLMU97a5lpiVRlPESh0xbMkD+7L+ScFuiQf+Wg1PEeKmvmABXvMOUVuxw==" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <body>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
             Launch demo modal
        </button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <textarea></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
        <script>
        tinymce.init({
                selector: 'textarea',
                menubar: false,
                height: '400',
                plugins: 'link',
                toolbar: 'link'
        });
        </script>
    </body>

You may tell me to do this: https://www.tiny.cloud/docs/integrations/bootstrap/
I already tried this solution, I did some tests and it only fix the problem up to Bootstrap V4.7.
I really hope you'll be able to help me, see you :)

Share Improve this question edited Mar 30, 2021 at 20:15 asked Mar 30, 2021 at 13:01 One 4046 531 silver badge7 bronze badges

1 The code sample you have posted shows you are loading [email protected] not Bootstrap 5. – Tiny Lincoln Commented Mar 30, 2021 at 15:28
@TinyLincoln Yup sorry, i'm editing this rn (I posted my test file ..) Edit: update done :) – One 4046 Commented Mar 30, 2021 at 16:28

Add a ment |

4 Answers 4

Sorted by: Reset to default 7

Because of changes to Bootstrap 5, as OP mentions, the current fix on Tiny's documentation site (see here) does not work for Bootstrap 5 (At the time of posting, I can confirm that Tiny's documentation team is aware of this, and has an open task to address it in an uping docs update.)

Here is a workaround for this issue that:

Works in Bootstrap 5
Doesn't require jQuery
...doesn't work in IE11.

document.addEventListener('focusin', function (e) { 
  if (e.target.closest('.tox-tinymce-aux, .moxman-window, .tam-assetmanager-root') !== null) { 
    e.stopImmediatePropagation();
  } 
});

Here is a Tiny Fiddle demonstration: https://fiddle.tiny.cloud/R8haab

if the above did not work, try add : data-bs-focus="false" attribute to the modal

e.g.:

<div class="modal fade" data-bs-focus="false" ... aria-hidden="true">

this is work for bootstrap 5, you can see the tinymce documentation for bootstrap 4 also here

<script>
tinymce.init({
    selector: '#yourInputForm',
    plugins: 'table',
});

document.addEventListener('focusin', (e) => {
    if (e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
        e.stopImmediatePropagation();
    }
});

This is for tinymce 4.6.5 and Bootstrap 5 and OneUi 5.3 in modal window

<script>
  tinymce.init({
    ...
  });
  document.addEventListener('focusin', function (e) { 
    if (e.target.closest('.tox-tinymce-aux, .moxman-window, .tam-assetmanager-root') !== null) {
      e.stopImmediatePropagation();
    } 
  });
</script>

On the top in modal window add atribut data-bs-focus="false"

<div class="modal fade" data-bs-focus="false" ...>

本文标签： javascriptTinyMCE doesn39t work within Bootstrap 5 modalStack Overflow

版权声明：本文标题：javascript - TinyMCE doesn't work within Bootstrap 5 modal - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1743715416a2526653.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - TinyMCE doesn't work within Bootstrap 5 modal - Stack Overflow

4 Answers 4

更多相关文章