TinyMCE 在 jquery ui 模态对话框中不起作用，为什么？

Question

假设jquery.js、jquery-ui.js、jquery-tinymce.js已经加载。并且 tinyMCE 对象被实例化。所以这是带有标记的脚本：

<script type="text/javascript">

  $(functon() {

  $("#AddComment").click(function(){

     $("#Dialog").dialog({
        modal :  true,
        show  : "fade",
        hide  : "fade",
        buttons : {
           OK : function(){
              // some ajax requests...
           }

       }
     });

  });

  });

</script>

<div id="Dialog" style="display: none;">
  <textarea id="wysiwyg"></textarea>
</div>


<button id="AddComment">Add comment</button>

但它在没有对话框的情况下按预期工作（当 textarea (tinymce activeeditor) 在页面上时）

“不起作用”我的意思是，当显示对话框（模态对话框~模态 div）时，不可能点击“whitearea”并添加|编辑|删除内容

所以问题是：为什么 TinyMCE 在模态 div 中不起作用？

Answer 1

我有这个问题。

首先，我强烈建议您在模态对话框出现在屏幕上后实例化 tinymce。我发现 tinyMCE 会尝试占用屏幕上“最有效”的空间量，因此实际上是不可见的和/或整个屏幕，具体取决于模式框的设置方式。

但是，还有其他事情，您可能会注意到，在关闭对话框后，您与页面交互的能力在 tinyMCE 所在的区域内被禁用！您的页面可能已经遇到这种行为。

是什么解决了我的问题（虽然不是那么优雅，但是在拔出我的头发后）我选择销毁对话框并确保在表单收到服务器的通过响应后隐藏 tinymce。

有两个命令可用于此

1. 从轨道核爆对话框

   $('#modal-dialog').dialog('destroy');
   

2. 检查是否存在 tinymce 并在找到时隐藏它

   if ($(".textarea").length) {
       $('.textarea').tinymce().hide();
   };