CODEWITHSUNDEEP
csstwitter-bootstraptinymce
Johannes
Johannes

Reputation: 427

TinyMCE menus not working inside bootstrap modal

When placing a TinyMCE editor inside a bootstrap modal, the editor is visible and functioning, however when clicking a menu item the menu doesn't show up.

Upvotes: 2

Views: 2070

Answers (2)

Tiny Lincoln
Tiny Lincoln

Reputation: 1102

Bootstrap blocks all focusin calls from elements outside the dialog. To render TinyMCE instances inside a Bootstrap dialog, add the following code:

// Prevent Bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
  if ($(e.target).closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) {
    e.stopImmediatePropagation();
  }
});

Here is an example: http://fiddle.tinymce.com/gRgaab

Upvotes: 2

Johannes
Johannes

Reputation: 427

Add the folowing css

.tox-tinymce-aux {
    z-index: 999999!important;
}

Upvotes: 8

Related Questions