jquery - 当我移动 CKEditor 表单时出现问题

Question

我正在使用 CKEditor 为我的站点的某些文本区域创建所见即所得。

问题是，在网站的评论部分，我将加载 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 的 Module CKEditor ( https://www.drupal.org/project/ckeditor)。

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

Answer 1

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

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