TinyMCE显示构建器字体变更标签，保存HTML后显示异常如何解决

问题原因 #

结合配置和现象分析，异常由以下几个原因共同导致：

• 配置项不合理：你将forced_root_block设为空，关闭了默认的块级元素包裹逻辑，TinyMCE处理font、span这类行内样式标签时容易出现标签错乱；同时valid_elements配置虽然允许了所有标签，但没有显式声明字体相关标签的属性白名单，部分样式属性会被默认过滤。
• 实体编码异常：TinyMCE默认会对特殊字符做实体编码，你没有关闭该逻辑，导致<、>等标签标识符被转义为<、>，保存后源码里的标签会变成纯文本显示。
• 内容获取方式不规范：如果直接读取编辑器DOM的innerHTML获取内容，会拿到TinyMCE内部临时生成的冗余、处理过的标签，不是纯净的可保存源码。

解决方案 #

1. 调整TinyMCE配置 #

在你原有的配置基础上修改/新增以下参数：

var tinyconfig = {
  // 原有配置保持不变，新增/修改下面的内容
  forced_root_block : 'p', // 恢复默认根块元素，避免行内标签游离错乱
  entity_encoding: 'raw', // 禁止HTML标签实体编码，确保标签原样输出
  valid_elements: '*[*],meta[*],font[face|size|color|style],span[class|align|style]', // 显式允许字体相关标签及属性，避免样式被过滤
  keep_styles: true // 保留所有自定义样式不被自动清理
}

2. 使用官方API获取内容 #

保存内容时必须使用TinyMCE提供的getContent方法获取纯净源码，不要直接读取DOM属性：

// 正确获取可保存的HTML内容
const saveContent = tinymce.activeEditor.getContent({format: 'html'});
// 再将saveContent提交到后端存储

3. 对齐前后端转义逻辑 #

后端存储内容时不要额外做HTML实体转义，前端渲染时区分场景：如果要展示渲染后的富文本效果，直接输出HTML即可；如果要展示原始源码，再做实体转义处理，避免两种场景的转义逻辑混淆。

4. 异常兜底处理 #

如果修改后仍存在标签转义异常，可在获取内容后加一层反向转义逻辑，修正错误编码的字符：

const saveContent = tinymce.activeEditor.getContent({format: 'html'})
  .replace(/&lt;/g, '<')
  .replace(/&gt;/g, '>')
  .replace(/&quot;/g, '"');

内容的提问来源于stack exchange，提问作者naveen gorp