4

假设 , 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 中工作？

4

2 回答 2

5

我有这个问题。

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

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

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

有两个命令可用于此

  1. 从轨道核对对话框

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

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

    if ($(".textarea").length) {
    $('.textarea').tinymce().hide();
};
于 2012-11-10T17:52:38.227 回答
1

根据 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。

于 2015-03-02T19:40:35.377 回答