移动编辑器后，TinyMCE 编辑器的 iframe 从 DOM 中删除

【问题标题】：iframe of TinyMCE editor is removed from DOM after moving the editor移动编辑器后，TinyMCE 编辑器的 iframe 从 DOM 中删除
【发布时间】：2022-11-18 02:42:15
【问题描述】：

我有一个可排序的 TinyMce 编辑器集合，当一个编辑器被移动时，这个就不再工作了。

TinyMCE 编辑器 iframe 在拖动结束事件后变为空，但我不明白为什么。

编辑器工具栏在这里，但不起作用，内容消失，无法再次输入。

有没有办法在拖动结束事件后用他的初始内容重新初始化拖动的编辑器。

我正在使用 Reactjs 和 @dnd-kit/sortable。

【问题讨论】：

请提供足够的代码，以便其他人可以更好地理解或重现问题。

标签： reactjs drag-and-drop tinymce dnd-kit

【解决方案1】：

不支持在 DOM 周围移动 iFrame 编辑器。如果你想移动编辑器，你可以通过使用remove()删除编辑器并在移动后使用init()重新初始化它来实现。

https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.root/#remove https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.root/#init

另一种选择是以内联模式运行 TinyMCE： https://www.tiny.cloud/docs/tinymce/6/use-tinymce-inline/

【讨论】：

感谢您的回答。知道我正在使用 tinymce.Editor ReactJS 组件后，如何在调用 remove() 方法后初始化编辑器？根据文档，我已经尝试使用内联模式，但该模式不适用于移动设备。你能给我一个重新初始化案例的例子吗？
这是一个使用 init() 和 remove() 来帮助您入门的基本示例：fiddle.tiny.cloud/7niaab