7

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();
                    }}]});        
    });
Marcel
  • 874
  • 1
  • 14
  • 28

5 Answers5

19

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)

Michael Fromin
  • 13,131
  • 2
  • 20
  • 31
  • Clutch man, nice addition, the "official" tinyMCE Bootstrap Integration fix (as noted by Breith below) was not working for me. – Misha'el Mar 26 '19 at 17:31
  • 1
    @Misha'el the link in the other post on this (Breith) points to documentation for TinyMCE 5 in particular. There is a separate page for TinyMCE 4 (https://www.tiny.cloud/docs-4x/integrations/bootstrap/#usingtinymceinabootstrapdialog). Those should both work as well as the approach in my answer. – Michael Fromin Jun 27 '19 at 14:17
4

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/

Breith
  • 2,160
  • 1
  • 23
  • 32
1

I ended up with the following 3 code snippets to handle all problems within bootstrap modal window:

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

  • The first one is recommended several times but did not work for me on its own.

  • The second one was needed to get it to work in every situation.

  • The third was important to also hide the toolbar when the modal window was closed.

I hope this helps someone :)

LaborC
  • 41
  • 1
  • 6
0

As none of these solutions were working for me i went for adding z-index for the element of the tiny popups for image , link etc.

    //add this in CSS: 
        .addZindex{
            z-index: 10001;
        }
    
    //call this function:
    
        $('#my_modal').on('shown.bs.modal', function() {
            $(".tox").addClass('addZindex');
        })
Eric Aya
  • 69,473
  • 35
  • 181
  • 253
RoshJ
  • 461
  • 1
  • 6
  • 24
0

If anyone who is using React and React Bootstrap then this solution should work for you.

Imtiaz Shakil Siddique
  • 3,732
  • 30
  • 37