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>

Why wouldn't you just use an `` or `` for this? The `contenteditable="true"` on a non-traditional input is terrible for accessibility and its cross-browser support isn't that great either. Inputs and TextAreas are plenty customizable. — n8jadams, Nov 21 '19 at 17:13
Indeed...unable to reproduce. Are you sure you pasted *text* it looks like you pasted a whole bunch of HTML — Paulie_D, Nov 21 '19 at 17:20
@n8jadams Because I want it can be auto resized based on the length of content, I don’t want to use scroll bar. Plus, I need to vertically center the placeholder and text. Have tried both ways, maybe contentditable will be easier. — FlyingBurger, Nov 21 '19 at 17:29
@Paulie_D you clearly did not paste rich text if you could not reproduce. When you copy rich text or html and paste it into a contenteditable, the styles and elements are added. — epascarello, Nov 21 '19 at 18:36

score 25 · Accepted Answer · answered Nov 21 '19 at 17:19

25

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>

answered Nov 21 '19 at 17:19

epascarello

195,511
20
184
225

1

I think it should be `insertHTML` instead of `insertText`, since the later will convert new-lines into divs. – Lafi Jun 15 '21 at 01:10
document.execCommand is deprecated. Is it okay to use it? – Tài Hatranduc May 15 '22 at 20:42
@TàiHatranduc I think you are answering your own question as you ask it :) – Sergey Jun 03 '22 at 22:27
My question is why "execCommand" is being used in these examples, why not just grab that text and set the text value to be what was in the clipboard (after stripping out formatting)... or am I missing something obvious? – Sergey Jun 03 '22 at 22:28
@Sergey Because the text may not be the entire innerHTML of the element. They may be pasting content between two words. They may have selected a paragraph and are pasting to replace it. This takes care out that. You can do it without the command, but it is a lot of code. The Other answer just replaces the content, but you can see the comment says why it does not work correctly – epascarello Jun 04 '22 at 03:14

score 1 · Answer 2 · answered Nov 21 '19 at 17:20

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

/* Derrived 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 - Derrived 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>

This doesn't work where there is already some text in the field. — Santosh, Mar 09 '21 at 04:53
Ah yes, this essentially overwrites ALL contents and replaces them with what was in the clipboard, but this needs to append to the text (including into the exact spot where the cursor is, or even more challenging [in case partial text was _selected_]) — Sergey, Jun 03 '22 at 22:31

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

2 Answers2

Linked