Tinymce 4.3.10 in bootstrap modal not showing menu drop down

Question

I'm using Tinymce 4.3.10 inside bootstrap modal but it's not displaying any menu drop down. I found that it's because bootrap blocks all focus events on contents within the dialog and tried following code as given here but it didn't worked for me.

My code is a below:

<script type="text/javascript" src="{{ asset('js/tinymce/tinymce.min.js') }}"></script>
<script type="text/javascript">
    tinymce.init({
    selector: "textarea:not(.mceNoEditor)",
    browser_spellcheck: true,
    force_br_newlines: true,
    force_p_newlines: false,
    forced_root_block: '',
    font_formats: 'Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace;AkrutiKndPadmini=Akpdmi-n;Comic Sans MS=comic sans ms,sans-serif;Times New Roman=times new roman,times;',
    fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt',
    plugins: ["textcolor", "advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table paste"],
    toolbar: "fontselect | fontsizeselect | forecolor backcolor | insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    height: "200",
    content_css: [
        '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
        '//cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.css',
        '//www.tinymce.com/css/codepen.min.css'
    ],
    image_title: true,
    // enable automatic uploads of images represented by blob or data URIs
    automatic_uploads: true,
    // URL of our upload handler (for more details check: https://www.tinymce.com/docs/configure/file-image-upload/#images_upload_url)
    images_upload_url: '../postAcceptor',
//    images_upload_base_path: 'http://localhost/colorin',
    // here we add custom filepicker only to Image dialog
    file_picker_types: 'image',
    // and here's our custom image picker
    file_picker_callback: function (cb, value, meta) {
        var input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');

        // Note: In modern browsers input[type="file"] is functional without 
        // even adding it to the DOM, but that might not be the case in some older
        // or quirky browsers like IE, so you might want to add it to the DOM
        // just in case, and visually hide it. And do not forget do remove it
        // once you do not need it anymore.

        input.onchange = function () {
            var file = this.files[0];

            // Note: Now we need to register the blob in TinyMCEs image blob
            // registry. In the next release this part hopefully won't be
            // necessary, as we are looking to handle it internally.
            var id = (new Date()).getTime();
            var blobCache = tinymce.activeEditor.editorUpload.blobCache;
            var blobInfo = blobCache.create(id, file);
            blobCache.add(blobInfo);

            // call the callback and populate the Title field with the file name
            cb(blobInfo.blobUri(), {title: file.name});
        };

        input.click();
    }
});

// Prevent bootstrap dialog from blocking focusin
$(document).ready(function(e){
// Bug fix for text fields when opening TinyMCE and/or MoxieManager windows inside a Bootstrap Modal.
$(document).on('focusin', function(e) {
    if ($(e.target).closest(".mce-window").length || $(e.target).closest(".moxman-window").length) {
        e.stopImmediatePropagation();
    }
});    
});
</script>

There are no js errors and I've also tried switching include position of tinymce.min.js and jquery-1.9.1.min.js but still nothing changed.

Answer 1

Did you try to add

.mce-menu {position:fixed !important}

This worked for me.

Taken from: tinymce in bootstrap modal: wrong dropdown position on scroll.

Answer 2

Dropdown menues rendering below TinyMce quick fix:

.tox-tinymce-aux {
    position: relative !important;
    z-index: 1600;
}

Tested on TinyMce 5.0.3, Boostrap 4.3.1 and MDB 4.7.6
This works by simply placing dropdown menues above all other content.