SunEditor HTML属性白名单功能解析与最佳实践

问题背景

SunEditor作为一款流行的富文本编辑器，在2.45.1版本后出现了一个关于HTML属性白名单(attributesWhitelist)功能的重要变更。开发者反馈，当尝试使用attributesWhitelist配置来保留HTML元素的style属性时，编辑器会意外移除包含这些属性的div标签，导致文本对齐等样式失效。

技术分析

变更原因

在SunEditor 2.45.1版本中，引入了更严格的HTML格式验证机制。编辑器现在要求格式化的行级元素必须包含在特定的范围元素内，否则会被自动清理。这是为了确保编辑器内部格式的一致性和可预测性。

解决方案演进

1. 临时解决方案：开发者可以通过在HTML中添加特定的类名__se__format__range_xxx来绕过此限制，但这不适用于用户直接输入的HTML内容。

2. 最终解决方案：在2.47.2版本中，SunEditor团队引入了strictHTMLValidation选项，默认值为true。将其设置为false可以恢复之前的行为，允许更自由的HTML结构。

最佳实践建议

1. 明确需求：如果项目需要严格控制的HTML输出，保持strictHTMLValidation为true，并确保所有HTML格式符合编辑器的内部结构要求。

2. 灵活配置：当需要处理用户提供的HTML或保留原始HTML结构时，建议配置如下：

SUNEDITOR.create(document.getElementById('editor'), {
    strictHTMLValidation: false,
    attributesWhitelist: {all: "style"}
});

3. 版本选择：对于稳定性要求高的项目，可以考虑暂时停留在2.44.12版本，直到完全测试新版本的兼容性。

深入理解

SunEditor的这种变更反映了富文本编辑器领域的一个常见挑战：如何在提供灵活编辑功能的同时，确保生成的HTML结构是干净、一致的。这种平衡往往需要通过配置选项来调节，以满足不同项目的需求。

结论

SunEditor的HTML处理机制在不断发展，开发者需要关注版本变更日志，特别是与HTML处理相关的配置选项。通过合理配置strictHTMLValidation和attributesWhitelist，可以在灵活性和规范性之间找到适合自己项目的平衡点。