HTML を contenteditable に貼り付けるときに Chrome がフォントサイズを設定しないようにする

Question

再現: Firefox デスクトップと Chrome デスクトップで MVCE スニペットを実行します。 FFデスクトップを開き、ソースコードから「foobar」をコピーします。 Chrome デスクトップを開き、ターゲット (ここのコロンの後) window.onload=function(){constinfo=document.querySelector('.info'),pinfo=document.querySelector('.paste-info') に貼り付けます。

P粉668113768 · Answer

貼り付けイベントをインターセプトし、貼り付けられたコンテンツを変更して、js を使用して強制的にプレーンテキストとして貼り付けるようにします。

contenteditable div に id="editor" の ID を追加しました。そして、次の js コードを追加します:

const editorEle = document.getElementById('editor');

// 貼り付けイベントを処理する
editorEle.addEventListener('paste', function (e) {
    // デフォルトのアクションを防止します
    e.preventDefault();

    // コピーしたテキストをクリップボードから取得します
    const text = e.clipboardData
        ? (e.originalEvent || e).clipboardData.getData('text/plain')
        : // IEの場合
        window.clipboardData
        ? window.clipboardData.getData('テキスト')
        : '';

    if (document.queryCommandSupported('insertText')) {
        document.execCommand('insertText', false, text);
    } それ以外 {
        // キャレットの現在の位置にテキストを挿入します
        const range = document.getSelection().getRangeAt(0);
        range.deleteContents();

        const textNode = document.createTextNode(text);
        range.insertNode(textNode);
        range.selectNodeContents(textNode);
        range.collapse(false);

        const 選択 = window.getSelection();
        選択.removeAllRanges();
        選択範囲.addRange(範囲);
    }
});

これは実行中のスニペットです。これで問題が解決したかどうかをお知らせください:

const editorEle = document.getElementById('editor');

// `paste` イベントを処理します
editorEle.addEventListener('paste', function (e) {
    // デフォルトのアクションを防止します
    e.preventDefault();

    // コピーしたテキストをクリップボードから取得します
    const text = e.clipboardData
        ? (e.originalEvent || e).clipboardData.getData('text/plain')
        : // IEの場合
        window.clipboardData
        ? window.clipboardData.getData('テキスト')
        : '';

    if (document.queryCommandSupported('insertText')) {
        document.execCommand('insertText', false, text);
    } それ以外 {
        // キャレットの現在の位置にテキストを挿入します
        const range = document.getSelection().getRangeAt(0);
        range.deleteContents();

        const textNode = document.createTextNode(text);
        range.insertNode(textNode);
        range.selectNodeContents(textNode);
        range.collapse(false);

        const 選択 = window.getSelection();
        選択.removeAllRanges();
        選択範囲.addRange(範囲);
    }
});




window.onload = function() {
  const info = document.querySelector('.info'),
    pinfo = document.querySelector('.paste-info'),
    ターゲット = 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 = "HTML の貼り付け: " e.clipboardData.getData('text/html').replaceAll('', '>') '

';
});
};

div[コンテンツ編集可能] {
  境界線: 1 ピクセルの黒一色。
}

ソーステキスト: foobar



  宛先、ここに貼り付けてください:

P粉658954914 · Answer

を使用して API を選択できます。
手順は

ペーストイベントハンドラーで、現在の選択内容を表す Range オブジェクトを取得します。
createContextualFragment() メソッドにより、この Range オブジェクトを使用して、貼り付けられた HTML マークアップを DocumentFragment オブジェクトに解析します。
Range#deleteContents() )。
手順 2 で作成した DocumentFragment オブジェクト (カーソルがある場所)。
Range オブジェクトを折りたたんで、カーソルが新しく貼り付けたコンテンツの末尾に移動します。これらの手順をすべて手動で実行すると、ブラウザはリッチテキストコンテンツを「インテリジェントに」処理できなくなり、クリップボード内のコンテンツのみが解析されます。

window.onload = function() { const info = document.querySelector('.info'), pinfo = document.querySelector('.paste-info'), ターゲット = 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 = "HTML の貼り付け:

" e.clipboardData.getData('text/html').replaceAll('

', '>') '
';

e.preventDefault();
const tag = e.clipboardData.getData("text/html") ||
e.clipboardData.getData("テキスト/プレーンテキスト");
const sel = getSelection();
const range = sel.getRangeAt(0);
const frag = range.createContextualFragment(マークアップ);
スコープ.deleteContents();
range.insertNode(frag);
range.collapse();
});
};
div[コンテンツ編集可能] {
  境界線: 1 ピクセルの黒一色。
}

ソーステキスト:

foobar




  宛先、
ここに貼り付けてください: