Partial View内打开的jQuery对话框中TinyMCE编辑器无法编辑如何解决

根因说明 #

jQuery UI的模态对话框默认会拦截所有非自身DOM树内元素的聚焦行为，而TinyMCE的可编辑区域是动态生成的独立节点/iframe，不在对话框的初始DOM结构中，因此无法获取输入焦点，导致无法输入内容。

修复步骤 #

• 重写jQuery UI对话框的_allowInteraction方法，放开对TinyMCE相关元素的聚焦拦截
• 调整TinyMCE的初始化时机，在对话框完全打开后再初始化编辑器，关闭对话框时销毁实例避免重复初始化异常
• 给对话框添加appendTo配置，挂载到body节点下，规避DOM层级导致的交互问题

修改后的代码示例 #

jQuery Dialog 初始化代码 #

// 全局重写交互拦截规则，允许TinyMCE元素获取焦点
$.ui.dialog.prototype._allowInteraction = function(event) {
    return !!$(event.target).closest(".mce-container").length || this._super(event);
};

$("#divAddPara").dialog({
   heightStyle: "content",
   width: "600px",
   modal: true,
   appendTo: "body", // 新增配置：将对话框挂载到body节点
   open: function (event, ui) {
      $(".ui-dialog-titlebar-close").hide();
      $(".ui-draggable .ui-dialog-titlebar ").css("display", "none");
      // 对话框打开后再初始化TinyMCE，原有TinyMCE配置原样迁移到此处即可
      tinymce.init({
        selector: "#AboutMe", // 对应TextArea生成的ID，可根据实际情况修改
        // 你原来的TinyMCE其他配置项全部放在这里
      });
   },
   close: function(event, ui) {
      // 对话框关闭时销毁TinyMCE实例
      tinymce.remove("#AboutMe");
   }
});

原有Partial View页面代码无需修改，保持原样即可 #

<div id="divAddPara">   
    <h4><b>Add New Paragraph</b></h4>       
    <table id="t03" style="margin:10px 0px 20px 0px;" cellpadding="0" cellspacing="0">
      <tr>
        <td> 
          @Html.TextAreaFor(model => model.AboutMe)
          @Html.ValidationMessageFor(model => model.AboutMe)
        </td>
      </tr>
   </table>
</div>

内容的提问来源于stack exchange，提问作者Amal