TinyMCE 富文本编辑器中的 MathML `<semantics>` 标签处理机制解析

问题背景

在使用 TinyMCE 富文本编辑器处理 MathML 数学公式时，开发人员发现编辑器会自动移除 <semantics> 标签。这个标签在数学公式处理中具有重要作用，特别是在区分 LaTeX 可编辑公式和手写公式的场景中。

技术原理

TinyMCE 出于安全考虑，默认会使用 DOMPurify 库对输入的 HTML/MathML 内容进行净化处理。在这个过程中，<semantics> 标签被识别为潜在的安全风险而被过滤掉。这是富文本编辑器常见的安全防护措施，旨在防止 XSS 攻击等安全威胁。

解决方案演进

初期尝试

开发团队最初尝试了多种配置方案：

1. 设置 extended_valid_elements 和 valid_elements 为最宽松的值
2. 启用 allow_mathml_annotation_encodings 选项
3. 尝试关闭净化功能（设置 cleanup: false 和 verify_html: false）

但这些方法均未能保留 <semantics> 标签。

官方修复

在 TinyMCE 7.7.0 版本中，开发团队针对此问题进行了专门修复。现在当配置了 allow_mathml_annotation_encodings 选项时，编辑器会正确保留并处理 <semantics> 元素。

最佳实践建议

对于需要使用 MathML 高级功能的开发者：

1. 确保使用 TinyMCE 7.7.0 或更高版本
2. 正确配置 allow_mathml_annotation_encodings 选项
3. 在升级版本后，测试 <semantics> 标签的功能是否符合预期

安全与功能的平衡

这个案例很好地展示了富文本编辑器在安全性和功能性之间寻求平衡的过程。TinyMCE 团队没有简单地完全放开限制，而是通过专门的配置选项来支持特定的使用场景，既满足了功能需求，又保持了系统的安全性。