带有 TinyMCE 内联的可排序 div答案

【问题标题】：Sortable div with TinyMCE inline带有 TinyMCE 内联的可排序 div
【发布时间】：2020-01-24 12:51:07
【问题描述】：

vijayscode (https://stackoverflow.com/questions/34850038/tinymce-4-not-working-with-sortable-jquery-divs/59896435#59896435) 发布的代码对我不起作用。

即使在我开始订购之前，TinyMCE 也无法正常工作。 TinyMCE 在使用内联模式时排序是否有效？

例如，如果我在此代码中添加inline: true 选项... TinyMCE 不会立即加载

http://fiddle.tinymce.com/33faab

你能告诉我一个关于http://fiddle.tinymce.com/的工作示例

【问题讨论】：

标签： tinymce jquery-ui-sortable inline

【解决方案1】：

你真的是在问两个问题，所以让我试着分别回答......

内联模式

为了使用内联模式，您需要定位页面上的块元素（例如div），而不是textarea。这在文档中有解释：

https://www.tiny.cloud/docs/configure/editor-appearance/#inline

如果你想在内联模式下使用 TinyMCE，你需要相应地调整你的 HTML。

排序

正如在 SO 帖子中所讨论的，您链接到拖放部分 DOM 的行为会影响 TinyMCE，因为从技术上讲，链接到 TinyMCE 的底层 DOM 元素会在您开始拖动时从 DOM 中删除，然后一个新元素是执行放置时插入。因此，您要做的是在移除 DOM 元素之前remove() TinyMCE，然后在将新的 DOM 元素放回 DOM 之后再次init()。

我不建议使用 mceAddEditor 和 mceRemoveEditor 来完成这项工作。相反，我会：

调用 remove() 将 TinyMCE 从 DOM 元素中分离出来。
让拖放完成
将 DOM 元素放回页面后，在其上调用 init()。

在元素返回页面后调用init() 可以让您确定元素的类/id/等，并使用正确的配置调用init()。

【讨论】：