Если повторно обернуть текст тегом, то добавляется дочерний элемент в предыдущем родительском элементе.
Можно ли сделать так, чтобы повторно обновлялся лишь стиль созданного элемента? Как, например, реализовано в Ckeditor.
<div contenteditable="true" id="input" >Цветной текст</div>
<button onclick="surroundSelection('#55FF55')">Зелёный</button>
<button onclick="surroundSelection('#FF5555')"> Красный</button>
const strs = document.getElementById("input");
function surroundSelection(color) {
if(color != ''){
var el = document.createElement("span");
el.style.color = color;
}
if (window.getSelection) {
var sel = window.getSelection();
if (sel.rangeCount > 0) {
var range = sel.getRangeAt(0).cloneRange();
range.surroundContents(el);
sel.removeAllRanges();
sel.addRange(range);
}
}
}
Например, выделим цветом слово "Добро"
Сейчас выделенный текст оборачивается вот так:
<body>
<span style="color:#55FFFF;">До
<span style="color:#FFAA00;">б</span>
ро</span>
</body>
А нужно вот так:
<body>
<span style="color:#55FFFF;">До</span>
<span style="color:#FFAA00;">б</span>
<span style="color:#55FFFF;">ро</span>
</body>
Ссылка на
Plunker 
