Bootstrap模态框集成TinyMCE后上传图片自动隐藏问题求助

Hey there, let's figure out why your Bootstrap modal is closing automatically after selecting an image when using TinyMCE with filemanager—especially since it works fine without TinyMCE. This is almost always related to event bubbling or conflicting callback logic between the three tools. Here are the most common fixes to try:

1. Adjust Filemanager Callback Logic #

First, check the callback function you use to insert the image into TinyMCE. Often, the issue is that either the callback is triggering an unintended modal close, or TinyMCE's internal events are bubbling up to the Bootstrap modal.

If you have a custom fmInsertImage (or similar) function, modify it to stop event propagation and avoid manually closing the modal unless you explicitly want to:

function fmInsertImage(url) {
  // Insert the image into TinyMCE as usual
  tinymce.activeEditor.insertContent(`<img src="${url}" alt="Uploaded image" />`);
  
  // Prevent the click event from bubbling up to the Bootstrap modal
  if (event) {
    event.stopPropagation();
    event.preventDefault();
  }
  
  // Remove any manual modal close code here if you have it (like $('#modal-id').modal('hide'))
}

2. Block Event Bubbling on the Filemanager Modal Content #

Bootstrap modals close when you click outside their .modal-content area, but sometimes clicks inside the filemanager (like on image selection buttons) can bubble up and trigger this behavior. Add a listener to your filemanager's modal content to stop this:

// Replace '#filemanager-modal' with your actual modal ID
$('#filemanager-modal .modal-content').on('click', function(e) {
  e.stopPropagation();
});

3. Tweak TinyMCE's File Picker Configuration #

If you're using TinyMCE's file_picker_callback to launch the filemanager, make sure the callback doesn't implicitly trigger a modal close. When you call TinyMCE's callback() function to pass the image URL, ensure you're not letting the event bubble:

tinymce.init({
  selector: '#your-editor-id',
  file_picker_callback: function(callback, value, meta) {
    // Open your filemanager modal
    $('#filemanager-modal').modal('show');
    
    // Override the filemanager's insert function
    window.fmInsert = function(imageUrl) {
      // Pass the URL to TinyMCE
      callback(imageUrl);
      
      // Stop event propagation to keep the modal open
      if (event) {
        event.stopPropagation();
      }
    };
  },
  // Rest of your TinyMCE config...
});

4. Check for Accidental data-dismiss Attributes #

Double-check the buttons in your filemanager interface. If any button (like the "Select Image" button) has a data-dismiss="modal" attribute, it will close the Bootstrap modal when clicked—even if you don't want it to. Remove this attribute if it's present on buttons that shouldn't close the modal.

Start with these steps—most likely the event bubbling or callback logic is the culprit. Test each change one by one to see which fixes your issue!

内容的提问来源于stack exchange，提问作者Nguyễn Việt