Episerver CMS 11中TinyMCE编辑器是否支持插入abbr标签

Episerver 11.15.1.0 + EPiServer.UI 11.25.0.0 环境下默认未开放abbr标签插入入口，但完全可以通过自定义配置实现，不需要修改编辑器核心。

具体实现步骤 #

• 配置标签白名单，避免内容被过滤
  Episerver默认会对TinyMCE提交的内容做标签清洗，首先需要把abbr标签及所需属性加入允许列表，防止保存内容时标签被自动剔除。在站点中新增继承IInitializableModule的TinyMCE初始化扩展类，代码参考如下：

[InitializableModule]
[ModuleDependency(typeof(TinyMceInitialization))]
public class CustomTinyMceConfig : IInitializableModule
{
    public void Initialize(InitializationEngine context)
    {
        context.Services.Configure<TinyMceConfiguration>(config =>
        {
            // 允许abbr标签，保留title、class、id属性
            config.Default().AddSetting("extended_valid_elements", "abbr[title|class|id]");
        });
    }
    public void Uninitialize(InitializationEngine context) { }
}

• 新增工具栏插入按钮
  在上述配置方法中追加自定义按钮逻辑，给编辑器添加abbr插入入口，点击后弹窗填写缩写对应的完整说明：

config.Default()
    // 把abbr按钮加到现有工具栏队列，位置可根据业务需求调整
    .ToolbarButtons(TinyMceToolbarButtons.Bold, TinyMceToolbarButtons.Italic, "abbrBtn", TinyMceToolbarButtons.Link)
    .AddSetting("setup", @"
        function(editor) {
            editor.addButton('abbrBtn', {
                text: 'ABBR',
                tooltip: '插入缩写标签',
                onclick: function() {
                    const selected = editor.selection.getContent();
                    editor.windowManager.open({
                        title: '插入缩写',
                        body: [
                            {type: 'textbox', name: 'content', label: '缩写文本', value: selected},
                            {type: 'textbox', name: 'title', label: '完整说明'}
                        ],
                        onsubmit: function(e) {
                            if(!e.data.content || !e.data.title) return;
                            editor.insertContent(`<abbr title="${e.data.title}">${e.data.content}</abbr>`);
                        }
                    });
                }
            });
        }
    ");

• 可选优化：编辑器内样式适配
  如果需要编辑人员在后台就能直观识别abbr标签，可以通过content_css配置给编辑器内的abbr标签添加自定义样式，比如加1px灰色虚线底边，和前端展示效果保持一致。

注意事项 #

• 如果站点配置了全局XSS内容过滤规则，需要同步把abbr标签和title属性加入过滤白名单，避免提交内容时被安全模块拦截
• 配置完成后重启应用池生效，测试时可先清空浏览器缓存再进入编辑页，避免旧的编辑器资源缓存导致按钮不显示

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