如何为Episerver TinyMCE编辑器的HTML标签添加属性？

我们在后端使用Episerver TinyMCE编辑器并通过ServiceCollectionExtension配置，需要为HTML标签添加属性（如自定义class、行内样式等），可通过以下方法实现：

方法1：配置自定义格式（Custom Formats） #

通过AddSetting添加自定义格式规则，指定目标标签及要添加的属性，同时可在工具栏开放选择入口：

services.AddTinyMce()
    .Configure(options =>
    {
        // 为p标签添加自定义class和行内样式
        options.AddSetting("formats", new
        {
            custom_paragraph = new
            {
                selector = "p",
                classes = "custom-text-block",
                styles = new { margin = "1rem 0", color = "#333" }
            }
        });

        // 保留原有工具栏配置，添加格式选择器让用户手动应用自定义格式
        options.Toolbar("formatselect | bold italic | link image | undo redo");
    });

方法2：全局默认标签属性注入 #

如果需要给所有对应标签默认添加属性，可使用content_style做全局配置：

services.AddTinyMce()
    .Configure(options =>
    {
        // 给所有p标签默认添加class和基础样式
        options.AddSetting("content_style", "p { class: 'default-paragraph'; line-height: 1.6; }");

        // 其他原有配置...
    });

方法3：自定义编辑器配置类扩展 #

若需要更复杂的定制逻辑，可创建自定义配置类继承TinyMceConfiguration：

public class CustomTinyMceConfiguration : TinyMceConfiguration
{
    public override void Configure(ITinyMceSettings settings)
    {
        base.Configure(settings);
        
        // 为h2标签添加自定义class属性
        settings.AddSetting("formats", new
        {
            custom_section_title = new
            {
                selector = "h2",
                classes = "section-heading"
            }
        });
    }
}

随后在Startup中注册该自定义配置类：

services.AddSingleton<TinyMceConfiguration, CustomTinyMceConfiguration>();

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