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();
                    }}]});        
    });

Answer 1

Bootstrap模式具有代码，可以阻止任何其他内容在启用时（通过设计）获得焦点。您应该可以使用以下代码覆盖它：

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

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

Answer 2

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

// 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/

Answer 3

我最后得到了以下3个代码段，以处理引导程序模式窗口中的所有问题：

$(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();
})

第一个建议多次使用，但对我没有帮助自己的。
需要第二个才能使它在任何情况下都能正常工作。
第三个很重要的一点是，当模式窗口已关闭。

我希望这对某人有帮助：）

在模态对话框中使用TinyMCE

3 个答案: