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

Question

Reproduire : exécution de l'extrait MVCE sur Firefox Desktop et Chrome Desktop. Ouvrez FF Desktop et copiez "foobar" à partir du code source. Ouvrez le bureau Chrome et collez-le dans la cible (après les deux points ici :) window.onload=function(){constinfo=document.querySelector('.info'),pinfo=document.querySelector('.paste-info'

P粉668113768 · Answer

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('', '>') + '

';
});
};

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

Source text: foobar



  Destination, paste here:

P粉658954914 · Answer

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
Réduit Rangel'objet

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('', '>') + '

'; 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: