Форум

allonemoon · #1 (**permalink**) 27.02.2023, 12:21

День добрый! Приведу сразу свой код.

function optionStyleText(style, tag) {

    selText = document.getSelection();
    anchorOffset = selText.anchorOffset;
    focusOffset = selText.focusOffset;
    node = document.getSelection();
    textSel = document.getSelection().toString();

     const tagDecorText = document.createElement(tag);
          tagDecorText.setAttribute('class', style);

        let range = new Range(); //создаю диапазон
                range.setStart(textNode.firstChild, anchorOffset);
                range.setEnd(textNode.lastChild, focusOffset);

                content = range.extractContents();
                tagDecorText.innerHTML = textSel;
                range.deleteContents(); 
                range.insertNode(tagDecorText);
               
                document.getSelection().removeAllRanges();
                document.getSelection().addRange(range);
}

если передаю тег b и класс то все устанавливается. Текст выделенный становится жирным и присваивается класс. А как обработать снятие? На мысль приходит одно нужно условие проверки, обернут текст или нет в какой-либо тэг? Подскажите направление хоть куда копать? п.с. и можете объяснить принцип работы getAtRange, а то не догоняю слегка его

рони · #2 (**permalink**) 27.02.2023, 13:30

allonemoon,
выделить текст, затем кликнуть по красному для снятия выделения.

<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .red {
            background-color: #FF0000;
        }
    </style>
</head>

<body>
    <p id="p">Выдели меня: <i>курсив</i> и <b>жирный</b></p>
    <script>
        function optionStyleText(style, tag) {

            let range = window.getSelection().getRangeAt(0);
            let selectionContents = range.extractContents();
            if (!selectionContents.textContent) return;
            let elem = document.createElement(tag);
            elem.appendChild(selectionContents);
            elem.classList.add(style);
            range.insertNode(elem);
        }

        document.querySelector('#p').addEventListener('mouseup', function() {
            optionStyleText('red', 'b')
        })
        document.querySelector('#p').addEventListener('click', function({ target }) {
            if (target = target.closest('b.red')) target.replaceWith(...target.childNodes);
        })
    </script>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript