Prevent Chrome from setting font size when pasting HTML into contenteditable

Question

Reproduction: Running the MVCE snippet on Firefox Desktop and Chrome Desktop. Open FF Desktop and copy "foobar" from the source code. Open the Chrome desktop and paste into the target (after the colon in here:) window.onload=function(){constinfo=document.querySelector('.info'),pinfo=document.querySelector('.paste-info'

P粉668113768 · Answer

Maybe intercept the paste event and change the pasted content to force it to be pasted as plain text using js.

I added the id of id="editor" on the contenteditable div. And add the following js code:

const editorEle = document.getElementById('editor');

// Handle the paste event
editorEle.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')
        : '';

    if (document.queryCommandSupported('insertText')) {
        document.execCommand('insertText', false, text);
    } else {
        // 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);
    }
});

This is a snippet of it running. Let me know if this solves your problem:

const editorEle = document.getElementById('editor');

// Handle the `paste` event
editorEle.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')
        : '';

    if (document.queryCommandSupported('insertText')) {
        document.execCommand('insertText', false, text);
    } else {
        // 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);
    }
});




window.onload = function() {
  const info = document.querySelector('.info'),
    pinfo = document.querySelector('.paste-info'),
    target = document.querySelector('.target');
  setInterval(() => {
    const sel = ".source *, .target *"
    info.innerHTML = '';
    for (const elm of [...document.querySelectorAll(sel)]) {
      info.innerHTML  = "TAG: "   elm.tagName   "; TEXT: "   elm.innerText    "; FONTSIZE: "   window.getComputedStyle(elm)['font-size']   "
";
    }
  }, 1000);
  target.addEventListener('paste', function(e) {
    pinfo.innerHTML  = "PASTE HTML: "   e.clipboardData.getData('text/html').replaceAll('', '>')   '

';
});
};

div[contenteditable] {
  border: 1px solid black;
}

Source text: foobar



  Destination, paste here:

P粉658954914 · Answer

You can use to select API.
The steps are

In the paste event handler, get the Range object representing the current selection.
Use this Range object to parse the pasted HTML markup into a DocumentFragment object, thanks to the createContextualFragment() method.
Delete previously selected content (Range#deleteContents() ).
InsertThe DocumentFragment object we created at step 2, where the cursor is.
CollapseThe current Range object so that the cursor moves to the end of the newly pasted content.

Performing all of these steps manually will prevent the browser from "intelligently" processing rich text content; only parsing the content in the clipboard.

window.onload = function() {
  const info = document.querySelector('.info'),
    pinfo = document.querySelector('.paste-info'),
    target = document.querySelector('.target');
  setInterval(() => {
    const sel = ".source *, .target *"
    info.innerHTML = '';
    for (const elm of [...document.querySelectorAll(sel)]) {
      info.innerHTML = "TAG: " elm.tagName "; TEXT: " elm.innerText "; FONTSIZE: " window.getComputedStyle(elm)['font-size'] "
";
    }
  }, 1000);
  target.addEventListener('paste', function(e) {
    pinfo.innerHTML = "PASTE HTML: " e.clipboardData.getData('text/html').replaceAll('', '>') '

';

e.preventDefault();
const tag = e.clipboardData.getData("text/html") ||
e.clipboardData.getData("text/plain text");
const sel = getSelection();
const range = sel.getRangeAt(0);
const frag = range.createContextualFragment(markup);
scope.deleteContents();
range.insertNode(frag);
range.collapse();
});
};

div[contenteditable] {
  border: 1px solid black;
}

Source text: foobar



  Destination, paste here: