Alternative to document.execCommand?

Question

JavaScript

thank you for your time.

Is there an alternative or alternative implementation of document.execCommand? The problem is that in each browser execCommand behaves differently, there is no way to set classes, identifiers and other attributes for elements. Plus, I would like to have semantic correctness (for example, for bold only strong in all browsers, and not span & b).

I paid attention to the implementation of this moment in other major visual editors, for example, TinyMCE & WordPress Gutenberg do not use this method at all (only contenteditable is used from the entire arsenal).

Example:

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

If I remove the letters "MP", then the following should come out:

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

Many thanks in advance for your help and again for your time.

Answer 1

You can use the Clipboard API, as MDN itself warns against using document.execCommand
. For example, you have a "Copy" button that will copy the contents of the desired element to the clipboard.

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

You hang an event handler on this button and write the desired piece of text to the Clipboard through the Navigator object

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

And now the desired text in the clipboard