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

【问题标题】：TinyMCE doesn't work within jquery ui modal dialog, why?TinyMCE 在 jquery ui 模式对话框中不起作用，为什么？
【发布时间】：2012-11-06 04:43:03
【问题描述】：

假设 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) 在页面上时）

“不起作用”是指，当显示对话框时（模态对话框 ~modal div），无法单击“whitearea”并添加|编辑|删除内容

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

【问题讨论】：

你的代码有错别字，“$(functon(){”应该是“$(function(){”。你在浏览器控制台中看到任何js错误吗？
完全没有错误...这就是问题所在，这就是我在这里问这个问题的原因...

标签： jquery jquery-ui tinymce

【解决方案1】：

我遇到了这个问题。

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

不过还有其他问题，您可能会注意到，在关闭对话框后，您与页面交互的能力在 tinyMCE 存在的区域内被禁用！您的页面可能已经出现了这种行为。

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

有两个命令可用于此

从轨道核对对话框
```
$('#modal-dialog').dialog('destroy');
```

检查tinymce是否存在，如果发现则隐藏

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

【讨论】：

【解决方案2】：

根据 Symbal 的回复，这是对我有用的解决方案。每次打开对话框时，首先检查是否在您的文本区域设置了tinymce，如果已将其删除，则将tinymce应用于文本区域。

$("#Dialog").dialog({             
    open: function(){
        if($('#wysiwyg').tinymce() != undefined)
        {
            $('#wysiwyg').tinymce().remove();
        }
        $("#wysiwyg").tinymce({
            // Location of TinyMCE script
            script_url: "/js/tiny_mce/tiny_mce.js"
        });
    }
});

我使用的是 tinymce 版本 3。

【讨论】：