@WorksDens
JustDen

Как изменять стиль кнопки в зависимости от наличия оборачеваемого тега?

У меня есть метод 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;
}
  • Вопрос задан
  • 83 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы