在模态对话框中使用TinyMCE

Question

我试图用找到了jQuery的模态对话框类在http://www.jqueryscript.net/demo/jQuery-Modal-Dialog-Plugin-For-Bootstrap-3-Bootstrap-3-Dialog/examples/，至今它运行良好。

我唯一遇到的问题是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）