Paste onto a [contenteditable] element as plain text

paste.js

document.querySelector('[contenteditable]').addEventListener('paste', function (event) {
  event.preventDefault();
  document.execCommand('inserttext', false, event.clipboardData.getData('text/plain'));
});

Works like charm! Thanks 👍

Since execCommand is discouraged to use as stated in the official MDN docs as well as w3school, I wonder if this is possible without execCommand. I need to figure this out for work and really cant come to a solution. I ultimately need to prevent formatted text to be pasted, with the cursor in the right place and no execCommand. Any ideas?

You could always intercept the data and manually insert it as the innerText of the "content editable" element.

@jp3492 See here. https://htmldom.dev/paste-as-plain-text/

As @jp3492 has said, the execCommand API is deprecated. The following code works the same by just setting the inner text of the target element.

function pasteAsPlainText(event) {
  event.preventDefault();
  event.target.innerText = event.clipboardData.getData("text/plain");
}