富文本编辑器里怎么实现格式刷功能？

最简单的办法是别去遍历 computedStyle，那玩意儿太重而且算出来的值往往不是你想要的（比如颜色会转成 rgb）。利用浏览器原生的 queryCommandValue 把当前选区的核心状态存起来，再用 execCommand 刷过去就行。虽然 execCommand 被标记为废弃，但做这种轻量级功能它依然是最好用的 API，不用自己造轮子。

核心逻辑就是两步：点一下存状态，再点一下遍历执行 execCommand。

let isPainting = false;

let currentStyles = [];



// 支持的样式命令，按需添加

const styleCommands = ['bold', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'fontName', 'fontSize'];



// 获取当前选区样式

function pickFormat() {

    currentStyles = styleCommands.map(cmd => ({

        cmd: cmd,

        value: document.queryCommandValue(cmd)

    }));

    isPainting = true;

    console.log('样式已吸取', currentStyles); // 调试用

}



// 应用样式到新选区

function applyFormat() {

    if (!isPainting) return;

    

    currentStyles.forEach(style => {

        if (style.value && style.value !== 'false') { // 排除空值

            document.execCommand(style.cmd, false, style.value);

        }

    });

    

    // 单次模式：刷完一次自动关闭，如果想要像 Word 那样连续刷，把这行去掉

    isPainting = false;

    currentStyles = [];

}



// 绑定事件示例

document.getElementById('format-brush-btn').addEventListener('click', () => {

    if (!isPainting) {

        pickFormat();

    } else {

        isPainting = false; // 取消格式刷状态

    }

});



// 监听选区变化，如果在刷模式下，选区变了就自动应用（或者你可以设计成再次点击按钮才应用）

document.addEventListener('selectionchange', () => {

    // 注意：selectionchange 触发很频繁，实际开发建议加个防抖或者设计成点击应用

    // 这里为了演示简单，不直接在这里调用 applyFormat，而是建议用户选中后再次点击工具栏按钮触发 applyFormat

});