Textbox not clickable in TinyMCE modal box

问题

I'm developing a panel for a client which features a 'New Blog Post' button which opens up a modal and in that modal it is possible to click an 'Add image' box which opens another modal. The issue here is the fact that the 'Add image's' modal box contains text boxes which are supposed to be clickable however, these are not.

I was experimenting with Z-Index's to see if that was the issue however, I had no luck with resolving the problem.

These modals consist of Bootstrap and TinyMCE(for editing).

It can be found here: http://olidev.me/testpanel/ : under the 'American site' tab, click 'Add Blog Post' and then click on the 'Insert' tab on tool bar in the 'Post' area and 'Insert image'.

Sorry for the confusing access to this issue but hopefully its easily resolvable.

EDIT: I tried another application called 'CKEDITOR' and the exact same problem occurred, is this due to the 3 modals overlapping eachother??

回答1:

Since you are using Bootstrap (also applies to jQuery UI Dialog), the TinyMCE modal window is losing focus when launched so you can't click inside. The below code will prevent that from happening.

TinyMCE in a jQuery UI dialog

TinyMCE portion of code:

tinymce.init({
    selector: "textarea",
    plugins: [
    "advlist autolink link image lists charmap print preview hr anchor pagebreak",
    "searchreplace visualblocks visualchars code fullscreen insertdatetime media
     nonbreaking",
    "save table contextmenu directionality emoticons paste textcolor"
   ],
   toolbar: "insertfile undo redo | styleselect | bold italic | 
alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | 
link image | print preview media fullpage | forecolor backcolor emoticons", 
   style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ]
});

JQuery Modal focus fix:

// prevent Bootstrap from hijacking TinyMCE modal focus    
$(document).on('focusin', function(e) {
  if ($(e.target).closest(".mce-window").length) {
    e.stopImmediatePropagation();
  }
});

JSFiddle

回答2:

After looking into what you said about inserting an image, I also found it's the same behavior with videos. And it led me to believe the reason why is because you need to use a file manager plugin in order to handle files in TinyMCE, such as MoxieManager.

Once you have that, your image/video windows will look like this:

Then you will be able to choose and accept files.
Here is the official answer from the TinyMCE FAQ page:

回答3:

Eternalhour solution did the trick. However, I had to dig and change my setup on bootstrap. Since my page is using Bootstrap (v3.3.7) I had to do the following.

Look for the focusin event within the bootstrap.js file.
Find the function which is referenced in this post where the Bootstrap modal is called.
Test the fix adding the piece of code to the function.
After succesful testing, you should modify your minified file in case you are adding it to your project but be careful (I did it by hand).

Result:

Modal.prototype.enforceFocus = function () {
$(document)
  .off('focusin.bs.modal') // guard against infinite focus loop
  .on('focusin.bs.modal', $.proxy(function (e) {
    //IMPORTANT: I had To remove the following commented code block, which was the 
    // original code before the fix  
    /*
         if (document !== e.target && this.$element[0] !== e.target && 
         !this.$element.has(e.target).length) { this.$element.trigger('focus') 
         } 
    */
  if ($(e.target).closest(".mce-window").length){
    e.stopImmediatePropagation();
  }
  }, this))

}

By removing the code, and adding the accepted solution, I was able to click and edit the input field which in my case was the hyperlink field. I tested it in Edge, Firefox and Chrome and it worked.

来源：https://stackoverflow.com/questions/26836103/textbox-not-clickable-in-tinymce-modal-box

标签

jquery

html

css

twitter-bootstrap

tinymce