SunEditor项目中字体名称包含数字的Bug分析与修复

SunEditor作为一款流行的富文本编辑器，在处理自定义字体时遇到了一个有趣的Bug。当用户尝试使用名称中包含数字的字体（如"Exo 2"、"Source Sans 3"等）时，编辑器无法正确应用这些字体样式。

问题现象

在SunEditor的实际使用场景中，开发者发现从Google Fonts API导入的某些字体无法正常工作。这些字体名称中通常包含数字或特殊字符，例如：

• Exo 2
• Source Sans 3
• Slabo 27px

虽然这些字体能够正常显示在下拉菜单中，但当用户选择它们时，编辑器却没有任何响应。相比之下，名称中不包含数字的字体则能正常应用。

技术分析

这个问题的根源在于SunEditor处理字体名称的方式。在CSS中，当字体名称包含空格或特殊字符时，需要使用引号将其包裹。例如：

font-family: "Exo 2", sans-serif;

然而，SunEditor在处理字体选择时，可能没有对包含特殊字符的字体名称进行适当的转义或引号包裹处理。这导致生成的CSS规则无效，从而无法正确应用字体样式。

解决方案

项目维护者在收到问题报告后迅速响应，在版本2.46.1中修复了这个问题。修复方案可能包括：

1. 对字体名称进行自动转义处理
2. 在生成CSS规则时自动添加必要的引号
3. 改进字体选择逻辑，确保特殊字符不会影响样式应用

最佳实践

对于使用SunEditor的开发者，在处理自定义字体时应注意：

1. 检查字体名称是否包含特殊字符
2. 确保正确导入字体资源
3. 及时更新到最新版本以获得最佳兼容性

这个案例展示了开源社区快速响应和解决问题的效率，同时也提醒我们在处理用户输入时需要特别注意特殊字符的处理。