Альтернатива document.execCommand?

Question

[Tsuintora]

благодарю за потраченное время.

Существует ли альтернатива или реализация альтернативы document.execCommand? Проблема заключается в том, что в каждом браузере execCommand ведёт себя по разному, нет возможности устанавливать элементам классы, идентификаторы и другие аттрибуты. Плюсом, хотелось бы иметь семантическую корректность (например для жирного только strong во всех браузерах, а не span & b).

Обращал внимание на реализацию этого момента в других крупных визуальных редакторах, например, TinyMCE & WordPress Gutenberg вообще не используют этот метод (из всего арсенала используют только contenteditable).

Пример:

<p contenteditable = "true">
    <a href = "321">
        <strong>
            <em>
                Олимпиада
            </em>
        </strong>
    </a>
</p>

Если я убираю с букв "МП", то должно получится следующее:

<p contenteditable = "true">
    <a href = "321">
        <strong>
            <em>
                Оли
            </em>
        </strong>
    </a>
    МП
    <a href = "321">
        <strong>
            <em>
                иада
            </em>
        </strong>
    </a>
</p>

За ранее огромное спасибо за помощь и ещё раз за потраченное время.

Comments

[Aetae]

Нет. Есть только боль и страдание.
Визуальное редактирование в браузерах - это одна из самых жутких вещей. Даже редакторы, разработка которых ведётся десятилетиями всё равно не лишены периодических багов.
Тащем не рекомендую пытаться что-то пилить с нуля. Очень не рекомендую.)

[Den Alex Smith]

Aetae, а я рекомендую. Хотя бы только для того, чтобы человек смог доковырять до максимума, понять логику работы в других браузерах, перерыл кучу форумов и литературы (научился и это делать) и сделал хоть что-то работоподобное своими руками. А потом понял, что тут уже тупик, взял и изучил новую технологию.

Чтобы понять, как работают велосипеды, нужно самому изобрести парочку.

[Aetae]

Den Alex Smith, ну не знаю. Я, само собой, прошёл через этот ад, но как-то не чувствую, что оно мне что-то дало кроме страданий, потому и другим не рекомендую.
Но, возможно, какие-то неявные бонусы я получил, которых сам не замечаю, закалился, так сказать... Врядли.)

[Den Alex Smith]

Aetae, как минимум, Вы самостоятельно получили этот опыт. Уверяю, неявные бонусы есть. Кроме того, примитивные реализации редактора с использованием document.execCommand имеют право на существование (это из разряда "необходимо и достаточно"). Но это не означает, что в целом я с Вами несогласен :)

Answer 1

[Hi-Pyncho]

Можно использовать Clipboard API, так как в самой MDN предупреждают, что лучше избегать использование document.execCommand

Например, у тебя есть кнопка "Скопировать", которая скопирует содержимое нужного элемента в буфер обмена.

const copyButton = document.querySelector('.button')

Вешаешь обработчик события на эту кнопку и через объект Navigator записываешь в Clipboard нужный фрагмент текста

copyButton.addEventListener('click', () => {
  window.navigator.clipboard.writeText(input.value)
})

И теперь нужный текст в буфере обмена

Comments

[olser]

Thank you, man!