文章/答案/技术大牛

发布

社区首页 >问答首页 >TinyMCE在Bootstrap 5模式下不工作

问TinyMCE在Bootstrap 5模式下不工作
EN

Stack Overflow用户

提问于 2021-03-30 13:01:26

回答 1查看 1.9K关注 0票数 1

希望你能帮我

所以我的问题是：

我想将TinyMCE编辑器集成到Bootstrap 5模式中

但问题是，在TinyMCE modals (例如链接模式)中，我无法编辑输入。这是我的代码：

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.7.1/tinymce.min.js" integrity="sha512-RnlQJaTEHoOCt5dUTV0Oi0vOBMI9PjCU7m+VHoJ4xmhuUNcwnB5Iox1es+skLril1C3gHTLbeRepHs1RpSCLoQ==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/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.net/npm/bootstrap@5.0.0-beta3/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>

你可以告诉我这样做：https://www.tiny.cloud/docs/integrations/bootstrap/

--我已经尝试过这个解决方案，我做了一些测试，它只解决了这个问题，直到引导V4.7.

我真的希望你能帮助我，再见:)

bootstrap-modal

tinymce-5

javascript

html

tinymce

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-03-30 22:53:51

由于对Bootstrap 5的更改，正如OP所提到的，Tiny的文档站点(请看这里)上的当前修复程序不适用于Bootstrap 5(在发帖时，我可以确认Tiny的文档团队知道这一点，并在即将进行的文档更新中解决这个问题)。

以下是解决此问题的一个解决办法：

在Bootstrap 5的作品
不需要jQuery
.不适用于IE11

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

下面是一个小小的Fiddle演示：https://fiddle.tiny.cloud/R8haab

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66871451

复制

相似问题

问TinyMCE在Bootstrap 5模式下不工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问TinyMCE在Bootstrap 5模式下不工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问TinyMCE在Bootstrap 5模式下不工作
EN