TinyMCE在jQueryUI模态对话框中打开

Question

当在jqueryUI模态对话框中使用tinyMCE时，我无法使用超链接或“插入图像”功能。

基本上，在经过大量搜索后，我找到了这个：

http://www.tinymce.com/develop/bugtracker_view.php?id=5917

奇怪的是，对我来说，这似乎不是一个tinyMCE问题，而更像是一个jqueryUI问题，因为当jqueryUI的模态属性设置为false时，问题不存在。

使用更丰富的表单，我发现每当tinyMCE失去焦点时，表单中的第一个元素都会获得焦点，即使它不是当前聚焦/点击的元素。

有没有JavaScript大师能够想出如何保持对话框模态并使tinyMCE正常工作的方法？

- user1703809

Answer 1

当覆盖 _allowInteraction 无效时，以下方法为我解决了问题:

$(document).on('focusin', function(e) {
    if ($(event.target).closest(".mce-window").length) {
        e.stopImmediatePropagation();
    }
});

我并不是真正的功臣。这个想法来自于TinyMCE论坛上的这个帖子。

（他们已经将错误跟踪器移至GitHub。tinymce/issues/703是相应的GitHub问题。）

- Bradley Mountford

---

我可以确认这个方法可行，而_allowInteraction对我来说不起作用。非常感谢！ - Pascal Cloverfield

难道不应该是$(e.target)而不是$(event.target)吗？或者"event"在其他地方定义了吗？ - MG123

Answer 2

目前似乎还没有适当的解决方案。这有点像一个hack，但对我来说确实有效。 每次打开对话框时，请按以下方式删除文本区域并重新添加它：

var myDialog = $('#myDialog');
var myTextarea = myDialog.find('textarea');
var clonedTextArea = myTextarea.clone(); // create a copy before deleting from the DOM
var myTextAreaParent = myTextarea.parent(); // get the parent to add the created copy later

myTextarea.remove(); // remove the textarea

myDialog.find('.mce-container').remove(); // remove existing mce control if exists

myTextAreaParent.append(clonedTextArea); // re-add the copy

myDialog.dialog({
   open: function(e1,e2){
        setTimeout(function () {
             // Add your tinymce creation code here
       },50);
   }
});

myDialog.dialog('open');

- Dilhan Jayathilake

Answer 3

这对我来说似乎解决了问题，或者至少是绕过了它（将其放在$(document).ready()中的某个地方）：

$.widget('ui.dialog', $.ui.dialog, {
    _allowInteraction: function(event) {
        return ($('.mce-panel:visible').length > 0);
    }
});

- strikernl