Telerik RadEditor有序列表字体大小设置代码优化需求

针对RadEditor输出内容中<ol>标签font-size被固定设为1、但其子项<li>内<font>字号（1-7级）更大的问题，以下是满足你优化需求的实现方案：

优化思路与代码实现 #

核心优化点解决 #

1. 移除硬编码switch：用键值对映射表替代switch语句，更简洁易维护
2. 替换setTimeout：绑定RadEditor的OnClientContentLoaded事件，确保内容加载完成后再执行处理逻辑
3. 输出规范HTML：直接操作DOM调整样式，同时可清理冗余的<font>标签

优化后的代码 #

function fixOlFontSize(editor) {
    const contentArea = editor.get_contentArea();
    const olList = contentArea.querySelectorAll('ol');

    // 字号映射表，对应RadEditor的1-7级字号
    const fontSizeMap = {
        1: 'xx-small',
        2: 'x-small',
        3: 'small',
        4: 'medium',
        5: 'large',
        6: 'x-large',
        7: 'xx-large'
    };

    olList.forEach(ol => {
        const firstLi = ol.querySelector('li:first-child');
        if (!firstLi) return;

        const fontTag = firstLi.querySelector('font');
        if (!fontTag || !fontTag.size) return;

        const targetSize = fontSizeMap[fontTag.size];
        if (targetSize) {
            // 给ol设置对应字号
            ol.style.fontSize = targetSize;

            // 可选：清理冗余font标签，输出更简洁的HTML
            while (fontTag.firstChild) {
                firstLi.insertBefore(fontTag.firstChild, fontTag);
            }
            fontTag.remove();
        }
    });
}

// 绑定编辑器内容加载完成事件，替代setTimeout
function onEditorContentLoaded(editor) {
    fixOlFontSize(editor);
}

编辑器配置绑定 #

在RadEditor的ASP.NET配置中添加事件绑定：

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientContentLoaded="onEditorContentLoaded">
    <!-- 你的编辑器其他配置项 -->
</telerik:RadEditor>

代码说明 #

• 映射表fontSizeMap直接对应RadEditor的1-7级字号到CSS标准字体大小值，后续调整只需修改此对象
• 通过OnClientContentLoaded事件触发处理，完全替代定时器，避免内容未加载完成导致的处理失败
• 清理冗余<font>标签的逻辑可根据需求选择保留，确保输出的HTML没有多余嵌套，符合规范

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