Verhindern Sie, dass Chrome die Schriftgröße festlegt, wenn HTML in contenteditable eingefügt wird

Question

Reproduzieren: Ausführen des MVCE-Snippets auf Firefox Desktop und Chrome Desktop. Öffnen Sie FF Desktop und kopieren Sie „foobar“ aus dem Quellcode. Öffnen Sie den Chrome-Desktop und fügen Sie ihn in das Ziel (nach dem Doppelpunkt hier:) window.onload=function(){constinfo=document.querySelector('.info'),pinfo=document.querySelector('.paste-info') ein.

P粉668113768 · Answer

也许可以拦截粘贴事件，并更改粘贴的内容以强制使用js将其粘贴为纯文本。

我在 contenteditable div 上添加了 id="editor" 的 id。并添加以下js代码：

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

这是它运行的一个片段。让我知道这是否解决了您的问题：

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

您可以使用选择API。
步骤是

在粘贴事件处理程序中，获取表示当前选择的 Range 对象。
使用此 Range 对象将粘贴的 HTML 标记解析为 DocumentFragment 对象，这要归功于 createContextualFragment()方法。
删除之前选择的内容 (Range#deleteContents() ).
插入我们在以下位置创建的 DocumentFragment 对象第2步，光标所在位置。
折叠当前 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('', '>') + '

';

e.preventDefault();
const 标记 = e.clipboardData.getData("text/html") ||
e.clipboardData.getData(“文本/纯文本”);
const sel = getSelection();
const range = sel.getRangeAt(0);
const frag = range.createContextualFragment(markup);
范围.deleteContents();
范围.insertNode(frag);
范围.collapse();
});
};

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

Source text: foobar



  Destination, paste here: