移动CKEditor表单时出现问题

Question

我正在使用CKEditor为我的网站上的某些textarea创建一个WYSIWYG。

问题是，在网站的评论部分，我将加载CKEditor的表单的DOM移动到我网站中的另一个<div>，以显示下面将由编辑的评论。用户。

因此，当CKEditor出现在另一个div中时，没有任何作用。我无法编辑内容，按钮也不起作用。

对于情境化，我这样做：

<div class='ckeditor-hidden'>
    <form action="/" class="form-edit-content">
         <textarea id="someid"></textarea>
    </form>
</div>
<div class="div-where-ckeditor-will-be-placed">

</div>

在jQuery中，我这样做：

$(".form-edit-content").appendTo(".div-where-ckeditor-will-be-placed");

现在，我为什么要这样做？因为我在我的网站上的不同位置使用相同的表单，所以这就是我移动它们的原因。

所以，当我移动时，CKEditor现在可以工作了。

要知道，我在我的网站上使用了Drupal 7，并为Drupal安装了模块CKEditor（https://www.drupal.org/project/ckeditor）。

有人知道为什么会这样吗？

Answer 1

这是因为默认情况下CKEditor使用iframe和iframe在您从DOM分离或移动到其他地方时被卸载。有几种方法可以解决这个问题。

1. Destroy编辑器在与DOM分离之前，在表单移动后再次初始化它。
2. 使用divarea插件，使CKEditor使用div代替iframe。您丢失了classic editor的有用功能，但没有iframe的问题。
3. 使用inline editor。