希望你能帮助我
所以这是我的问题:
我想在 Bootstrap 5 模式中集成 TinyMCE 编辑器
但问题是,在 TinyMCE 模态(例如链接模态)中,我无法编辑输入。
这是我的代码:
<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/[email protected]/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/[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>
你可以告诉我这样做:
https://www.tiny.cloud/docs/integrations/bootstrap/
我已经尝试过这个解决方案,我做了一些测试,它只能修复 Bootstrap V4.7 之前的问题。
我真的希望你能帮助我,再见:)
由于 Bootstrap 5 的更改,正如 OP 提到的,Tiny 文档网站上的当前修复(参见此处)不适用于 Bootstrap 5(在发布时,我可以确认 Tiny 的文档团队已经意识到这一点,并有一个开放任务在即将到来的文档更新中解决这个问题。)
以下是此问题的解决方法:
document.addEventListener('focusin', function (e) {
if (e.target.closest('.tox-tinymce-aux, .moxman-window, .tam-assetmanager-root') !== null) {
e.stopImmediatePropagation();
}
});
这是一个 Tiny Fiddle 演示:https://fiddle.tiny.cloud/R8haab
如果上述方法不起作用,请尝试添加:data-bs-focus =“false”属性到模态
例如:
<div class="modal fade" data-bs-focus="false" ... aria-hidden="true">
这是 Bootstrap 5 的工作,您也可以在here
查看 Bootstrap 4 的tinymce文档<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();
}
});
这适用于模态窗口中的tinymce 4.6.5和Bootstrap 5和OneUi 5.3
<script>
tinymce.init({
....
});
document.addEventListener('focusin', function (e) {
if (e.target.closest('.tox-tinymce-aux, .moxman-window, .tam-assetmanager-root') !== null) { e.stopImmediatePropagation(); }
});
</script>
在模态窗口顶部添加属性 data-bs-focus="false"
<div class="modal fade" data-bs-focus="false" ...>