TinyMCE 6插入HTML时div标签被移除的解决方法咨询

问题根源 #

TinyMCE 默认遵循 HTML 规范，<span> 属于行内元素，<div> 是块级元素，行内元素嵌套块级元素属于不合法结构，编辑器的内容过滤机制会自动修正这种结构，导致 <div> 被移除或调整位置。仅配置 valid_children 无法覆盖默认的 schema 规则限制。

可行解决方案 #

1. 调整编辑器核心过滤配置 #

在初始化编辑器时，同时配置 valid_elements、valid_children 并指定 HTML5 schema：

tinymce.init({
  // 其他已有配置...
  valid_elements: 'span[dummy|style], div[*], span[style]',
  valid_children: '+span[div]',
  schema: 'html5'
});

• valid_elements：明确声明允许保留的元素及属性，确保 <span>（含dummy类和style属性）、<div>（所有属性）都不会被过滤。
• valid_children: '+span[div]'：强制允许 <span> 作为 <div> 的父容器，打破默认的HTML嵌套限制。
• schema: 'html5'：HTML5标准对行内元素嵌套块级元素的约束更宽松，能减少编辑器的自动修正行为。

2. 插入内容时使用raw格式 #

调用 insertContent 时指定 format: 'raw'，跳过编辑器的HTML解析过滤流程，直接插入原始内容：

tinymce.activeEditor.insertContent(`<span class='dummy'>
                        <div><span style="font-style:italic;font-weight:bold;text-decoration:underline;">This Text is BOLD</span></div>
                        <div><span style="font-style:italic;">This text is Italic</span></div>
                        <div><span style="text-decoration:underline;">This Text is&#160; Underlined</span></div>
                      </span>`, {format: 'raw'});

注意：该方式会绕过编辑器的内容安全过滤，需确保插入的HTML内容可信，避免XSS风险。

3. 关闭自动清理（仅特殊场景使用） #

若上述方法仍无效，可关闭编辑器的内容清理验证，但此操作会降低安全性，仅建议在可控环境中使用：

tinymce.init({
  // 其他已有配置...
  cleanup: false,
  verify_html: false
});

验证方式 #

插入内容后，执行 console.log(tinymce.activeEditor.getContent({format: 'html'}))，查看输出的HTML是否保留了原始的<div>标签结构。

内容的提问来源于stack exchange，提问作者Athul M S