Using TinyMCE in a Modal Dialog

Question

I am trying to use a jquery modal dialog class found at http://www.jqueryscript.net/demo/jQuery-Modal-Dialog-Plugin-For-Bootstrap-3-Bootstrap-3-Dialog/examples/ and so far it is working perfectly.

The only problem I am having is with TinyMCE, I would like to use TinyMCE in the form. And I have loaded the TinyMCE instance successfully but now whenever another window from tinymce pops up, like the image or link creator windows I am unable to edit the text boxes in the popup form.

I checked the Console log and do not see any conflicts or errors, Can anybody assist with what would be possible causes?

TinyMCE Instance:

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

Modal Popup Instance

$("#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

The Bootstrap modal has code that stops anything else from getting focus while it is enabled (by design). You should be able to override this with code like the following:

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

(This assumes you don't mind using jQuery which is already in your code example)

Answer 2

Bootstrap blocks all focus events on contents within the dialog. Add this script to your page, and it will allow users to click inside the editor.

// Prevent Bootstrap dialog from blocking focusin

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

Source: https://www.tiny.cloud/docs/integrations/bootstrap/