在模态对话框中使用TinyMCE

Question

我正在尝试使用在http://www.jqueryscript.net/demo/jQuery-Modal-Dialog-Plugin-For-Bootstrap-3-Bootstrap-3-Dialog/examples/找到的jQuery模态对话框类，目前看来它完美地工作。

唯一的问题是与TinyMCE有关，我想在表单中使用TinyMCE。我已经成功加载了TinyMCE实例，但现在每当Tinymce的另一个窗口弹出，比如图像或链接创作者窗口，我就无法编辑弹出表单中的文本框。

我检查了控制台日志，没有看到任何冲突或错误，请问可能会有什么问题？

TinyMCE实例:

<script>
    tinymce.init({
            selector: 'textarea',
            relative_urls: false,
            remove_script_host: false,
            document_base_url: "https://mysite.co.za/",
            height: "360",
            fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
            font_formats: "Andale Mono=andale mono,times;" +
                    "Arial=arial,helvetica,sans-serif;" +
                    "Arial Black=arial black,avant garde;" +
                    "Book Antiqua=book antiqua,palatino;" +
                    "Comic Sans MS=comic sans ms,sans-serif;" +
                    "Courier New=courier new,courier;" +
                    "Georgia=georgia,palatino;" +
                    "Helvetica=helvetica;" +
                    "Impact=impact,chicago;" +
                    "Symbol=symbol;" +
                    "Tahoma=tahoma,arial,helvetica,sans-serif;" +
                    "Terminal=terminal,monaco;" +
                    "Times New Roman=times new roman,times;" +
                    "Trebuchet MS=trebuchet ms,geneva;" +
                    "Verdana=verdana,geneva;" +
                    "Webdings=webdings;" +
                    "Wingdings=wingdings,zapf dingbats",
            plugins: "image,advlist, table, autolink, charmap, code, colorpicker, contextmenu,link, lists, paste, preview, searchreplace,  spellchecker, textcolor, wordcount,emoticons",
            toolbar: "fontselect | fontsizeselect | forecolor | backcolor | bold | italic | underline | alignleft | aligncenter | alignright | alignjustify | bullist | numlist | outdent | indent | link | image | print | media | code",
            tools: "inserttable",
            contextmenu: "link image inserttable | cell row column deletetable"
        });
</script> 

模态弹窗实例

$("#new").click(function () {
        BootstrapDialog.show({
            title: 'Document',
            message: $('<div></div>').load('https://mysite.co.za/modals/document_editor.php'),
            buttons: [{
                    icon: 'glyphicon glyphicon-send',
                    label: 'Submit',
                    cssClass: 'btn-primary',
                    autospin: false,
                    action: function (dialogRef) {
                            $("#form").submit();
                            dialogRef.enableButtons(false);
                            dialogRef.setClosable(false);
                            dialogRef.getModalBody().html('<strong>Saving...</strong>');
                    }}, {label: 'Close', action: function (dialogRef) {
                        dialogRef.close();
                    }}]});        
    });

- Marcel

---

关于 Bootstrap 5，请参考以下链接： https://stackoverflow.com/a/66879496/15102874 - lsx

Answer 1

Bootstrap模态框有一段代码，当它被激活时，会阻止任何其他元素获取焦点（这是设计上的考虑）。您可以使用以下代码覆盖此行为：

$('#myModal').on('shown.bs.modal', function() {
    $(document).off('focusin.modal');
});

（假设您不介意使用已经在您代码示例中的jQuery）

- Michael Fromin

---

离合器先生，不错的补充。正如Breith所指出的那样，“官方”的tinyMCE Bootstrap集成修复对我没有起作用。 - Misha'el

@Misha'el，另一篇帖子中的链接（Breith）指向特定的TinyMCE 5文档。TinyMCE 4有一个单独的页面（https://www.tiny.cloud/docs-4x/integrations/bootstrap/#usingtinymceinabootstrapdialog）。这两个都应该像我的答案中的方法一样有效。 - Michael Fromin

Answer 2

Bootstrap会阻止对话框内部内容的所有焦点事件。将此脚本添加到您的页面中，它将允许用户在编辑器内单击。

// Prevent Bootstrap dialog from blocking focusin

$(document).on('focusin', function(e) {
  if ($(e.target).closest(".mce-window").length) {
    e.stopImmediatePropagation();
  }
});

来源：https://www.tiny.cloud/docs/integrations/bootstrap/

这篇文章介绍了如何在 Bootstrap 框架中集成 TinyMCE 编辑器。TinyMCE 是一个功能强大的富文本编辑器，可以轻松地创建和编辑 HTML 内容。

- Breith

Answer 3

我最终使用以下三个代码片段来解决所有在Bootstrap模态窗口中出现的问题：

$(document).on('focusin', function(e) {
       if ($(e.target).closest(".tox-dialog").length)
          e.stopImmediatePropagation();
});
  $('.modal').on('shown.bs.modal', function() {
    $(document).off('focusin.modal');
})
  $('.modal').on('hide.bs.modal', function() {
        $(".tox-toolbar__overflow").hide();
})

• 第一个方法被多次推荐，但是仅靠它并不能解决我的问题。

• 第二个方法是必须的，在所有情况下都能使其正常工作。

• 第三个方法同样重要，可以在模态窗口关闭时隐藏工具栏。

希望这能对某些人有所帮助 :)

- LaborC

Answer 4

由于这些解决方案都对我无效，所以我尝试为图片、链接等的弹出框元素添加了 z-index。

    //add this in CSS: 
        .addZindex{
            z-index: 10001;
        }
    
    //call this function:
    
        $('#my_modal').on('shown.bs.modal', function() {
            $(".tox").addClass('addZindex');
        })

- RoshJ

Answer 5

如果有人正在使用React和React Bootstrap，那么这个solution应该适用于你。

- Imtiaz Shakil Siddique