TinyMCE实例移除重插入后无法使用的解决方法咨询

将TinyMCE编辑器从文档中移除并重新插入后，无法正常输入内容。我制作了一个TinyMCE示例来演示该问题。

复现步骤：

• 点击「Init / re-init TinyMCE」按钮，在按钮下方初始化TinyMCE编辑器
• 点击「Remove content」按钮，将编辑器容器从文档中移除
• 点击「Append content」按钮，将容器重新插入文档
• 再次点击第一个按钮，此时无法在编辑器中输入文本

最后一步操作参考了相关讨论，请问如何让重新插入后的TinyMCE实例恢复可用？

核心问题是重复初始化同一个DOM元素导致编辑器状态异常，正确的处理流程是：移除容器前先销毁对应TinyMCE实例，重新插入后再重新初始化。

具体代码调整 #

1. 移除容器前销毁编辑器

在点击「Remove content」按钮时，先调用销毁方法清理实例：

document.getElementById('remove').addEventListener('click', function() {
  // 销毁指定编辑器实例
  tinymce.remove('#editor');
  document.getElementById('container').remove();
});

2. 重新初始化编辑器

点击「Init / re-init TinyMCE」按钮时，确保只对未实例化的容器进行初始化：

document.getElementById('init').addEventListener('click', function() {
  // 检查是否已存在该编辑器实例，不存在则初始化
  if (!tinymce.get('editor')) {
    tinymce.init({
      selector: '#editor',
      // 你的编辑器配置项
    });
  }
});

调整后，重新插入的容器就能正常初始化并支持输入操作。另外tinymce.init()本身会自动跳过已实例化的元素，但显式检查可以避免不必要的操作开销。

内容的提问来源于stack exchange，提问作者Allan Jardine