停止在 contenteditable div 中粘贴 html 样式，只粘贴纯文本

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.

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

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

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

Answer 5

I just tried to reproduce the issue on http://jsbin.com/ and the resulting div didn't have any styles on it. The issue you're seeing might be coming from Codepen rather than the HTML tag itself applying styles.