Stop pasting html style in a contenteditable div only paste the plain text

You can set the contenteditable attribute value to plaintext-only like this:

<div contentEditable="plaintext-only"></div>

indicates that the element's raw text is editable, but rich text formatting is disabled

Well supported most browsers, with Firefox adding support in v136

There is a non-standard user-modify CSS property which is supported by WebKit-based browsers:

-webkit-user-modify: read-write-plaintext-only;

This eliminates the need to use deprecated execCommand API or error-prone steps to position caret correctly.

[contenteditable] {
  -webkit-user-modify: read-write-plaintext-only;
}

<div><p style="color:red">Copy <em>this</em> <u>styled</u> text</p></div>
<div contenteditable="true">into this editable element</div>

There is one strange behavior: copy-and-paste text selected via double-click may introduce extra leading and/or trailing whitespaces (on macOS at least).

To support non-WebKit browsers, you still need to listen to paste event, such as:

someEditableElement.addEventListener("paste", function (e) {
  e.preventDefault();
  const text = e.clipboardData ? e.clipboardData.getData("text/plain") : "";

  if (document.queryCommandSupported?.("insertText")) {
    return document.execCommand("insertText", false, text);
  }

  const selection = document.getSelection();
  if (!selection) return;
  const range = selection.getRangeAt(0);
  range.deleteContents();
  range.insertNode(new Text(text));
  range.collapse(); // select nothing
  selection.removeAllRanges(); // position caret after inserted text
  selection.addRange(range); // show caret
});

There are differences between these two approaches. Use your discretion.

You can intercept the "paste" event and replace the content of the target.

/* Derived from: https://stackoverflow.com/a/6035265/1762224 */
const onPastePlainText = (e) => {
  var pastedText = undefined;
  if (window.clipboardData && window.clipboardData.getData) { // IE
    pastedText = window.clipboardData.getData('Text');
  } else if (e.clipboardData && e.clipboardData.getData) {
    pastedText = e.clipboardData.getData('text/plain');
  }
  e.target.textContent = pastedText;
  e.preventDefault();
  return false;
}

document.querySelector('.ediatable-div').addEventListener('paste', onPastePlainText);

.ediatable-div {
  border: 2px inset #EEE;
  height: 25vh;
}

/* Placeholder - Derived from: https://stackoverflow.com/a/20300212/1762224 */
[contentEditable=true]:empty:not(:focus):before {
  content: attr(data-text);
  color: #AAA;
}

<div class="ediatable-div" contenteditable="true" data-text="Paste copied HTML here"></div>
<div>
  <p style="text-decoration:underline">Copy <strong>me</strong>, I have <em>style</em>!</p>
</div>

The following solution works when there is already text in the field that is being pasted into, and it does not use the deprecated document.execCommand() function.

// Edited from https://htmldom.dev/paste-as-plain-text/

const editable_div = document.getElementById('editable_div');

// Handle the paste event
editable_div.addEventListener('paste', function (e) {
    // Prevent the default action
    e.preventDefault();

    // Get the copied text from the clipboard
    const text = e.clipboardData
        ? (e.originalEvent || e).clipboardData.getData('text/plain')
        : // For IE
        window.clipboardData
        ? window.clipboardData.getData('Text')
        : '';

    // Insert text at the current position of caret
    const range = document.getSelection().getRangeAt(0);
    range.deleteContents();

    const textNode = document.createTextNode(text);
    range.insertNode(textNode);
    range.selectNodeContents(textNode);
    range.collapse(false);

    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
});

<div id="editable_div" contenteditable="true">
    You can only paste plain text into me!
</div>

When contenteditable elements might be dynamically added to the DOM, it is useful to have a document-level handler that, once there, will detect future instances as well as existing ones.

// 1. Paste plain text only into contenteditable elements
document.addEventListener("paste", function (e) {
    if (e.target.isContentEditable) {
        e.preventDefault();
        var text = e.clipboardData.getData('text/plain')
        document.execCommand('insertText', false, text)
    }
});

// 2. Prevent any paste into contenteditable elements
document.addEventListener("paste", function (e) {
    if (e.target.isContentEditable) {
        e.preventDefault();
        return false;
    }
});

A HTML-only solution with no coding required is using the "plaintext-only" type for contentenditable elements:

<div contenteditable="plaintext-only">This text can be edited by the user.</div>

See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable