Moodle平台TinyMce编辑器与Fontawesome图标兼容问题求助

问题背景 #

长期以来我们在Moodle平台使用Atto作为文本编辑器，在页脚用FontAwesome图标做社交媒体链接，原代码如下：

<div style="text-align:center;">
    <a href="https://www.linkedin.com" target="_blank" title="Facebook"><span class="sr-only">Linkedin</span><span class="fa-stack fa-lg"><span class="fa fa-circle fa-stack-2x"></span><span class="fa fa-linkedin fa-stack-1x fa-inverse"></span></span></a>

    <a href="https://twitter.com/" target="_blank" title="Twitter"><span class="sr-only">twitter</span><span class="fa-stack fa-lg"><span class="fa fa-circle fa-stack-2x"></span><span class="fa fa-twitter fa-stack-1x fa-inverse"></span></span></a>

    <a href="https://www.youtube.com/" target="_blank" title="Youtube"><span class="sr-only">Youtube</span><span class="fa-stack fa-lg"><span class="fa fa-circle fa-stack-2x"></span><span class="fa fa-youtube fa-stack-1x fa-inverse"></span></span></a>
</div>

切换到TinyMCE编辑器后，代码被修改为（所有FontAwesome相关类被删除，导致图标无法显示）：

<div style="text-align: center;"><a title="Twitter" href="https://twitter.com/" target="_blank" rel="noopener"><span class="sr-only">twitter</span></a> <a title="LinkedIn" href="https://www.linkedin.com/" target="_blank" rel="noopener"><span class="sr-only">linkedin</span></a> <a title="Youtube" href="https://www.youtube.com/" target="_blank" rel="noopener"><span class="sr-only">Youtube</span></a></div>

目前管理多个Moodle平台，且Atto即将不再兼容Moodle，急需解决TinyMCE中使用FontAwesome图标的问题。

可行解决方案 #

方案1：配置TinyMCE允许FontAwesome的HTML类 #

1. 登录Moodle站点管理后台，进入插件 -> 文本编辑器 -> TinyMCE
2. 找到“有效的HTML元素”配置项，在原有规则基础上添加：

   span[class*="fa-"], span[class="fa-stack"], span[class="fa-lg"], span[class="fa-circle"], span[class="fa-inverse"], span[class="fa-stack-1x"], span[class="fa-stack-2x"]
   

   也可以用更简化的规则：span[class*="fa"]（允许所有包含fa的类）
3. 保存配置后，再次编辑页脚的HTML代码，TinyMCE就不会过滤FontAwesome相关的类了。

方案2：绕过编辑器，直接通过主题定制页脚 #

如果页脚是全局固定内容，推荐直接修改主题的页脚模板，避开编辑器过滤：

1. 进入Moodle的站点管理 -> 外观 -> 主题 -> 选择当前使用的主题 -> 自定义HTML（或主题的模板编辑选项）
2. 在页脚对应的模板区域（比如footer.html）插入原有的FontAwesome图标代码
3. 保存后，所有页面的页脚都会显示图标，无需通过文本编辑器编辑，稳定性更高，适合多平台批量同步配置。

方案3：安装TinyMCE的FontAwesome插件 #

找适配当前Moodle版本的TinyMCE第三方插件，这类插件通常会在编辑器工具栏添加插入FontAwesome图标的按钮，编辑时直接选择图标插入，编辑器会自动保留对应的类，不会过滤。安装后按照插件说明配置即可。

内容的提问来源于stack exchange，提问作者Benjamin Cabassot