Halang Chrome daripada menetapkan saiz fon apabila menampal HTML ke contenteditable

Question

Kemunculan semula:

1. Jalankan coretan MVCE pada desktop Firefox dan desktop Chrome.
2. Buka Desktop FF dan salin "foobar" daripada kod sumber.
3. Buka desktop Chrome dan tampal ke dalam sasaran (selepas tanda bertindih dalam 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>

Anda akan perasan:

1. Data papan keratan mengandungi perkara yang datang selepas <b>foobar</b> （请参阅 PASTE HTML:), tetapi...
2. HTML yang ditampal sebenar adalah dalam b 元素上设置了 style="font-size: 14px;" (saiz 14px daripada induk contenteditable).

Saya harap tiada saiz fon ditetapkan pada HTML yang ditampal kerana ia tidak dinyatakan dalam data papan keratan sumber.

Soalan: Bagaimana untuk memaksa Chrome tidak meletakkan sebarang saiz fon pada HTML yang ditampal apabila tiada saiz fon pada HTML sumber?

Saya mencuba penyelesaian: tetapan font-size: unset/revert ，但这会导致 font-size: unset pada sumber juga muncul dalam HTML yang ditampal. Saya tidak mahu sebarang saiz fon muncul dalam HTML yang ditampal.

---

Konteks kod ini ialah sambungan Chrome di mana saya mengawal data teks/html yang ditampal pada sasaran. Saya boleh melampirkan pendengar acara tampal pada sasaran contenteditable, tetapi saya tidak boleh menukar HTML/gaya kandungan selepas menampalnya.

Answer 1

Mungkin memintas acara tampal dan menukar kandungan yang ditampal untuk memaksanya ditampal sebagai teks biasa menggunakan js.

Id saya di contenteditable div 上添加了 id="editor". Dan tambahkan kod js berikut:

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

Berikut ialah coretannya dalam tindakan. Beritahu saya jika ini menyelesaikan masalah anda:

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

Anda boleh menggunakan Pilih API.
Langkahnya ialah

• Dalam pengendali acara tampal, dapatkan objek Range yang mewakili pilihan semasa.
• Gunakan objek Range 对象将粘贴的 HTML 标记解析为 DocumentFragment 对象，这要归功于 createContextualFragment() ini untuk menghuraikan penanda HTML yang ditampal ke dalam objek terima kasih kepada createContextualFragment()
kaedah.
• Padamkan kandungan yang dipilih sebelum ini (Range#deleteContents()
).
• Masukkan DocumentFragment objek
yang kami buat dalam langkah 2, di mana kursor berada.
• Meruntuhkan Range objek semasa
supaya kursor bergerak ke penghujung kandungan yang baru ditampal.

Melakukan semua langkah ini secara manual akan menghalang penyemak imbas daripada "pintar" memproses kandungan teks kaya hanya menghuraikan kandungan dalam papan keratan.

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(); teg const = e.clipboardData.getData("text/html") || e.clipboardData.getData("teks/teks biasa"); const sel = getSelection(); julat const = 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:

Answer 4