更改 contentEditable html 元素中的文本颜色

问：

在 HTML contenteditable 元素中突出显示带有颜色的文本。

我正在尝试实现一种可能性，即使用键盘快捷键在 HTML contenteditable 元素中使用预定义的突出显示颜色突出显示某些文本。

最初的想法是使用原生 CTRL+U 并为其提供 css 样式，例如

{ text-decoration: none, color: [my-highlight-color]}

这对于设置颜色非常有效，但删除颜色已经不起作用，因为浏览器会识别出文本没有下划线。

我尝试在可编辑元素上实现自定义侦听器：

    const iframeDocument = this.templatePreviewIframe.nativeElement.contentWindow.document;
    const selection = iframeDocument.getSelection();
    if (!selection) return;
    const range = selection.getRangeAt(0);

    const selectedText = range.toString();
    const paragraphText = elem.innerHTML;
    const startIndex = paragraphText.indexOf(selectedText);
    const endIndex = startIndex + selectedText.length;

    if (!this.isHighlighted(range)) {
      elem.innerHTML =
        elem.innerHTML.slice(0, startIndex) + `<span style="color: ${this.highlightColor}">${selectedText}</span>` + elem.innerHTML.slice(endIndex, elem.innerHTML.length);
    } else {
      elem.innerHTML =
        elem.innerHTML.slice(0, startIndex) + `</span>${selectedText}<span style="color: ${this.highlightColor}">` + elem.innerHTML.slice(endIndex, elem.innerHTML.length);
    }

isHighlighted（） 只检查计算出的样式，工作正常。

我不知道如何解决的问题是起始索引是通过所选子字符串的第一次出现来计算的，我不知道如何正确获取它，不幸的是在选择 API 上没有找到任何有用的东西，或者我只是不明白如何正确使用它。此外，不确定如何处理更复杂的场景，其中用户选择了混合的内容，其中有突出显示和未突出显示的文本。isHighlighted（） 在这种情况下返回 false。

p.s. 我使用 Angular