У меня есть метод execCommand который позволяет запускать команду для управления содержимым редактируемого поля, есть функция которая изменяет стиль нажатой кнопки. При помощи getSelection я получаю выделенный диапазон текста и проверяю циклом while наличие в parentNode добавленных тегов.
Например, я выделил текст, нажимаю на кнопку и выделенная область теста оборачивается в тег
<b>
или
<i>
Мне необходимо, чтобы у элемента с добавленным тегом активный класс кнопки сохранялся, а у элемента который не обернут в тег,когда мы кликаем курсором по нему, клас кнопки был не активный
<div class="toolbar">
<button class="btn" onclick="formatDoc('bold'), toggleClass(this)"><b>B</b></button>
<button class="btn"
onclick="formatDoc('italic'), toggleClass(this)"><b><i>I</i></b>
</button>
</div>
<div id="content" contenteditable="true" spellcheck="false" onclick="clickEditor(this)">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
function formatDoc(cmd, value = null) {
if (value) {
document.execCommand(cmd, false, value);
} else {
document.execCommand(cmd);
}
};
function toggleClass(el) {
if (el.className == "btn") {
el.className = "active_btn ";
} else {
el.className = "btn";
}
};
function clickEditor(el) {
let sel = window.getSelection();
let text = sel.baseNode.textContent;
let currentNode = sel.baseNode.parentNode;
while (['B', 'I'].includes(currentNode.nodeName)) {
console.log(currentNode.nodeName);
currentNode = currentNode.parentNode;
}
};
.toolbar {
display: flex;
}
.btn {
background: #fff;
border: 2px solid #ddd;
border-radius: 6px;
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin: 10px;
}
.active_btn {
background: #d1e2ff;
border: 2px solid #d1e2ff;
border-radius: 6px;
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin: 10px;
}