Question

我已经将TinyMCE添加到我的项目中，并且正在一个文本区域中使用它，该区域会弹出一个fancybox。我第一次操作它，它工作正常，但如果我关闭它并尝试再次打开它，它不会让我输入框。看起来没问题，只是文本区域有点灰色，不接受输入。如果我单击任何按钮（粗体，斜体，对齐，字体选择等），控制台将显示错误“j为空”。

我在网上发现了一些类似的问题，但找不到任何与我相似的人，所以我很困惑。我认为问题可能是我每次显示fancybox时都试图添加一个新的tinyMCE实例，然后我需要在重新初始化之前将其销毁，也许？但我不确定如何销毁它，或者即使这是我需要做的事情。

这是我的代码：

<head>...</head>
<body>
<script type="text/javascript">
 function tinyMCE_setup() {
   tinyMCE.init({
      mode : "textareas",
      theme : "advanced",
      plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
      theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,forecolor",
      theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,undo,redo,|,link,unlink,code",
      theme_advanced_buttons3 : "",
      theme_advanced_buttons4 : "",
      theme_advanced_toolbar_location : "top",
      theme_advanced_toolbar_align : "center",
      //theme_advanced_statusbar_location : "bottom",
      theme_advanced_resizing : true
   });
}
 function tinyMCE_remove() {
   //tinyMCE.destroy();
}
</script>

... some html ...

 <!-- Text -->
 <div style="display:none">
  <div id="addtext" class="addcontent">
    <p class="headline bg_text">add text or caption</p>
    <form id="addText" name="addText" action="add_text.php" method="post" onSubmit="return checkAddText()">
     <label>enter your caption or text here</label>
     <textarea id="text" name="text" rows="10" style="clear: both; margin-bottom: 14px; margin-top: 5px; width: 466px"></textarea>
      <input type="image" name="submit" id="imageField2" src="images/site/button_text_submit.gif" onMouseOver="this.src='images/site/button_text_submit_over.gif'" onMouseOut="this.src='images/site/button_text_submit.gif'"/>
    </form>
  </div>
 </div>

... more html ...

</body>
</html>

<script>
$(document).ready(function() {

 $("a#link_addtext").attr("href", "#addtext");

 $('a#link_addtext').fancybox({
    'hideOnContentClick': false,
        'padding' : 0,
    'overlayOpacity'    :   0.1,
        'onComplete': function(){
      tinyMCE_setup();
    }
    });

  ... other javascript ..
}
</script>

有人可以帮助我吗？

谢谢！

Answer 1

我正在使用fancybox 2.0

$("#notesbtn").fancybox({ 
    beforeShow: function () { tinymce.execCommand('mceToggleEditor', false, 'elm1'); },
    beforeClose: function () { tinymce.EditorManager.execCommand('mceRemoveControl', true, 'elm1'); }
});

Answer 2

你需要在关闭fancybox之前正确关闭tinymce，以便能够再次打开tinymce编辑器。用它来正确关闭它

tinymce.EditorManager.execCommand('mceRemoveControl',true, editor_id);

Answer 3

我在一个项目中遇到了同样的问题，我现在已经工作了一段时间，并且在过去的几个月中我尝试了几种不同的方法来修复它，但昨天我终于能够在一个项目中解决它了。似乎运作良好的方式。

关键是，您需要使用普通的javascript版本，而mode configuration option设置为none，而不是使用jQuery驱动的TinyMCE版本。这应该在页面加载后立即初始化（而不是在您想要加载TinyMCE时，就像您在示例中所做的那样）。然后，类似于@ user1116745的答案中建议的技术，一旦FancyBox完成加载，你就会使用FancyBox的回调来初始化TinyMCE：

（这假设您的文字区域的ID为text_form）

$(function(){
  $('#content_objects_edit').fancybox({
    onComplete: function () { tinyMCE.execCommand('mceAddControl', false, 'text_form'); },
    onCleanup: function () {
      tinyMCE.execCommand('mceFocus', false, 'text_form');
      tinyMCE.execCommand('mceRemoveControl', false, 'text_form');
    }
  });
})

从FancyBox's API开始，以下是这两个回调触发的时间：

onComplete - 将在显示内容后调用

onCleanup - 将在关闭之前调用

有关tinyMCE.execCommand执行的操作的详细信息，请see the docs。从本质上讲，它会在当场将textarea转换为tinyMCE实例。

这对我有用。自从我实施这种方法以来，您提到的灰色屏幕没有任何问题。

Answer 4

对于tinyMCE 4.X 在关闭回调之前在fancybox中添加tinyMCE.remove（）：

beforeClose : function() {
  tinyMCE.remove();
}

请参阅：Remove TinyMCE control and re-add

Answer 5

使用jquery.tinymce.js中的代码：

'onComplete': function() {
    $('textarea.tinymce').tinymce({
        ...
    })
    ...

Answer 6

https://stackoverflow.com/a/28063926/3478114

请参阅我的回答，了解它如何与ajax请求一起使用。

Answer 7

这项工作对我来说是fancybox 2.1.5我想

$(".fancybox").fancybox({
    afterLoad: function () {
        tinymce.remove();
        setTimeout(function(){tinymce.init({selector:'textarea'});},500);
    }
});

TinyMCE＆amp; Fancybox - 编辑器不适用于第二视图

7 个答案: