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存在的区域内禁用了与页面交互的能力！您的网页可能已经遇到此行为。

为我解决了这个问题（尽管不是那么优雅，但拔出我的头发后）我选择了销毁对话框，并确保在表单收到服务器的传递响应后隐藏了这个问题。

有两个命令可用于此

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

检查是否存在tinymce并将其隐藏

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

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。

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

2 个答案: