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>

没有弹出对话框时，它的工作效果符合预期（当页面上的文本区域（tinymce activeeditor）时）

“不起作用”是指，当弹出对话框（模态对话框〜模态div）时，无法单击“白色区域”并添加|编辑|删除内容

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

- Yang

---

你的代码中有一个拼写错误，"$(functon() {" 应该是 "$(function() {". 你在浏览器控制台中看到任何JS错误吗？ - András Szepesházi

没有任何错误... 这就是问题所在，这就是我在这里提出这个问题的原因... - Yang

Answer 1

我遇到了这个问题。

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

还有一点，你可能会注意到，在关闭对话框后，你无法与页面上存在tinyMCE的区域进行交互！可能你的页面已经出现了这种情况。

对我解决问题的方法是（虽然不太优雅，但把头发都拔光之后）我选择销毁对话框，并确保在表单从服务器接收到通过响应后隐藏tinymce。

这里有两个命令可供使用

1. Nuke the dialog box from orbit

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

2. Check for presence of tinymce and hide it if found

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

- Symbal

Answer 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。

- rweavere