两个按钮和一段文字，一个是加背景颜色，一个是取消，选中文字后实现按钮的效果

Question

react
有两个button按钮和一段文字，选中文字后点击按钮可对文字加背景颜色和取消背景颜色？如何实现这种效果

// 标记
onFlag = () => {
    this.replaceSelectedStrByEle(styles['custom-underline'])//黄色背景
}
//取消标记
onFlagc = () => {
    this.replaceSelectedStrByEle(styles['nite-writer-pen'])//白色背景
}
replaceSelectedStrByEle = (className) => {
    var getRange = () => {
        var me = window;
        var range = new Range(me.document);

        var sel = window.getSelection();
        if (sel && sel.rangeCount) {
            var firstRange = sel.getRangeAt(0);
            var lastRange = sel.getRangeAt(sel.rangeCount - 1);
            range.setStart(firstRange.startContainer, firstRange.startOffset)
            range.setEnd(lastRange.endContainer, lastRange.endOffset);
        }
        return range
    }
    var range = getRange();
    range.applyInlineStyle('i', {
        class: className
    });
    range.select();
}

Answer 1

这个可以参考富文本编辑器，原理是把选中的文本添加一个标签，然后调整标签属性改变颜色就行