jquery - 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)时)

“不起作用”我的意思是，当显示对话框(模态对话框~modal div)时，无法单击“whitearea”并添加|编辑|删除内容

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

Answer 1

我遇到了这个问题。

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

不过，您可能会注意到，关闭对话框后，您与页面交互的能力在tinyMCE所在的区域内被禁用!您的网页可能已经遇到此行为。

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

有两个命令可用于此目的

1. 将对话框从轨道上删除

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

2. 检查是否存在tinymce，如果发现则将其隐藏

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