выделите текст внутри текстовой области, чтобы выбрать цвет и применить к выбранной области, особенно с использованием JavaScript

Question

Я работаю над проектом angular 6 , есть текстовое поле с палитрой цветов, пользователь выбирает текст и применяет цвет, я заменяю выделенный текст тегом span, который содержитстиль с помощью встроенного CSS.

Пример: Когда выделена часть текста, я использую window.getSelection () , чтобы создать диапазон со смещениями, используясмещения Я могу получить выделенную область из содержимого текстовой области.После этого я заменяю выделенную область диапазоном, содержащим цвет шрифта (цвет поступает из палитры цветов).Впервые работает нормально.Но когда я делаю это снова, если я выбираю часть текста, смещения идут неправильно и цвет применяется к другой области, а не к выбранной области.Потому что предыдущая выбранная область будет заменена на spanTag , и выбор не произойдет.Выделение не перемещается через элемент span.

Вот код:

Это функция selection:

private getCaretAndSelectionRange() {
    var doc = this.editableElment.ownerDocument || this.editableElment.document;
    var win = doc.defaultView || doc.parentWindow;
    var sel;
    if (typeof win.getSelection != "undefined") {
        sel = win.getSelection();
        if (sel.rangeCount > 0) {
            var range = win.getSelection().getRangeAt(0);
            var preCaretRange = range.cloneRange();
            preCaretRange.selectNodeContents(this.editableElment);
            preCaretRange.setStart(range.startContainer,range.startOffset);
            preCaretRange.setEnd(range.endContainer, range.endOffset);
            this.caretPosition = this.editableElment.innerText.length;
            this.selecteTextLength = (range.endOffset - range.startOffset);
            this.firstIndex = preCaretRange.startOffset;
            this.secondIndex = preCaretRange.endOffset;
        }
    } else if ((sel = doc.selection) && sel.type != "Control") {
        var textRange = sel.createRange();
        var preCaretTextRange = doc.body.createTextRange();
        preCaretTextRange.moveToElementText(this.editableElment);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        this.caretPosition = preCaretTextRange.text.length;
        this.selecteTextLength = (textRange.endOffset - textRange.startOffset);
    }
}

Это форматер:

public formatDoc(sCmd, sValue) {
    this.editableElment = document.querySelector("#" + this.customTextAreaID);
    this.editableElment.focus();
    var commandStatus: boolean = document.execCommand('styleWithCSS', false, true);
    commandStatus = document.execCommand(sCmd, false, sValue);
    if(this.firstIndex !== null && this.secondIndex !== null) {
        var str = this.editableElment.innerText;
        var str2 = str.slice(this.firstIndex,this.secondIndex);
        var output = str;
        output = output.replace(new RegExp(str2, 'g'),'<span style="color:'+sValue+';">'+str2+'</span>');
        this.editableElment.innerHTML = output;
        console.log(this.editableElment.innerHTML+'before');
    }
    this.tfWidget.inputValue = this.editableElment.innerHTML;
}

Примечание: sCmd = 'ForeColor' &&sValue - это шестнадцатеричное значение из палитры цветов.