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

Question

I am using a contenteditable div, when I tried to paste something with style, it was suppose to only copy the plain text, but it got the style as well, does anyone know how to force it to convert to plain text when I paste it or anyone has a better solution

Here is my code:

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

Answer 1

When you paste in rich content, it will be displayed as rich content. So you would need to capture the paste event, prevent the default action, and read the text from the clipboard.

var ce = document.querySelector('[contenteditable]')
ce.addEventListener('paste', function (e) {
  e.preventDefault()
  var text = e.clipboardData.getData('text/plain')
  document.execCommand('insertText', false, text)
})

  [contenteditable] {
    background-color: black;
    color: white;
    width: 400px;
    height: 200px;
  }

<div contenteditable="true"></div>

<div>
  <h1>Test content</h1>
  <p style="color:red">Copy <em>this</em> <u>underlined</u></p>
</div>

Answer 2

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>

Answer 3

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>

Answer 4

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.

Answer 5

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 but Firefox

Answer 6

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;
    }
});