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

Question

Wiederauftauchen:

1. Führen Sie das MVCE-Snippet auf dem Firefox-Desktop und Chrome-Desktop aus.
2. Öffnen Sie FF Desktop und kopieren Sie „foobar“ aus dem Quellcode.
3. Öffnen Sie den Chrome-Desktop und fügen Sie ihn in das Ziel ein (nach dem Doppelpunkt in here:)

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'] + "<br>";
    }
  }, 1000);
  target.addEventListener('paste', function(e) {
    pinfo.innerHTML += "PASTE HTML: <pre>" + e.clipboardData.getData('text/html').replaceAll('<', '<').replaceAll('>', '>') + '</pre><br>';
  });
};

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

<div class="source" contenteditable=true>Source text: <b>foobar</b></div>

<div style="font-size: 14px">
  <div contenteditable=true class="target">Destination, <h1>paste here:</h1></div>
</div>

<div class="info"></div>
<div class="paste-info"></div>

Sie werden feststellen:

1. Die Daten in der Zwischenablage enthalten, was danach kommt <b>foobar</b> （请参阅 PASTE HTML:), aber...
2. Der tatsächlich eingefügte HTML-Code befindet sich in b 元素上设置了 style="font-size: 14px;" (Größe 14 Pixel vom übergeordneten Element von contenteditable).

Ich wünschte, im eingefügten HTML wären keine Schriftgrößen festgelegt, da diese nicht in den Quelldaten der Zwischenablage angegeben sind.

Frage: Wie kann ich Chrome zwingen, keine Schriftgröße in den eingefügten HTML-Code einzufügen, wenn im Quell-HTML keine Schriftgröße vorhanden ist?

Ich habe einen Workaround versucht: Die Einstellung font-size: unset/revert ，但这会导致 font-size: unset auf der Quelle erscheint auch im eingefügten HTML. Ich möchte nicht, dass im eingefügten HTML-Code irgendeine Schriftgröße angezeigt wird.

---

Der Kontext dieses Codes ist eine Chrome-Erweiterung, mit der ich die in das Ziel eingefügten Text-/HTML-Daten kontrolliere. Ich kann einen Einfüge-Ereignis-Listener an den bearbeitbaren Zielinhalt anhängen, aber ich kann den HTML-Code/Stil des Inhalts nach dem Einfügen nicht ändern.

Answer 1

也许可以拦截粘贴事件，并更改粘贴的内容以强制使用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('<', '<').replaceAll('>', '>') + '

';
});
};

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

Source text: foobar


  
Destination, 
paste here:

Answer 2

Answer 3

您可以使用 选择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('<', '<').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:

Answer 4