Empêcher Chrome de définir la taille de la police lors du collage de HTML dans contenteditable

Question

Réapparition :

1. Exécutez l'extrait MVCE sur le bureau Firefox et le bureau Chrome.
2. Ouvrez FF Desktop et copiez "foobar" à partir du code source.
3. Ouvrez le bureau Chrome et collez-le dans la cible (après les deux points dans 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>

Vous remarquerez :

1. Les données du presse-papier contiennent ce qui vient après <b>foobar</b> （请参阅 PASTE HTML:), mais...
2. Le code HTML collé est en b 元素上设置了 style="font-size: 14px;" (taille 14px du parent de contenteditable).

J'aurais aimé qu'aucune taille de police ne soit définie sur le HTML collé car elles ne sont pas spécifiées dans les données du presse-papiers source.

Question : Comment forcer Chrome à ne mettre aucune taille de police sur le HTML collé alors qu'il n'y a pas de taille de police sur le HTML source ?

J'ai essayé une solution de contournement : le paramètre font-size: unset/revert ，但这会导致 font-size: unset sur la source apparaît également dans le code HTML collé. Je ne veux pas qu'aucune taille de police apparaisse dans le code HTML collé.

---

Le contexte de ce code est une extension Chrome où je contrôle les données texte/html collées dans la cible. Je peux attacher un écouteur d'événement de collage sur le contenu cible modifiable, mais je ne peux pas modifier le HTML/le style du contenu après l'avoir collé.

Answer 1

Peut-être intercepter l'événement coller et modifier le contenu collé pour forcer son collage sous forme de texte brut à l'aide de js.

Mon identifiant à contenteditable div 上添加了 id="editor". Et ajoutez le code js suivant :

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

En voici un extrait en action. Faites-moi savoir si cela résout votre problème :

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

Vous pouvez utiliser Sélectionner l'API.
Les étapes sont

• Dans le gestionnaire d'événement coller, récupérez l'objet Range représentant la sélection actuelle.
• Utilisez cet Range 对象将粘贴的 HTML 标记解析为 DocumentFragment 对象，这要归功于 createContextualFragment() objet pour analyser le balisage HTML collé dans un objet grâce à createContextualFragment()
.
• Supprimer le contenu précédemment sélectionné (Range#deleteContents()
).
• Insérez DocumentFragment l'objet
que nous avons créé à l'étape 2, là où se trouve le curseur.
• Réduit Rangel'objet
actuel afin que le curseur se déplace à la fin du contenu nouvellement collé.

L'exécution manuelle de toutes ces étapes empêchera le navigateur de traiter "intelligemment" le contenu en texte enrichi en analysant uniquement le contenu du presse-papiers.

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 tag = e.clipboardData.getData("text/html") || e.clipboardData.getData("texte/texte brut"); 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:

Answer 4