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

Question

＃＃＃再現：＃＃＃

MVCE スニペットを Firefox デスクトップと Chrome デスクトップで実行します。

1. FF デスクトップを開き、ソース コードから「foobar」をコピーします。
2. Chrome デスクトップを開き、ターゲット (
here:
3. のコロンの後) に貼り付けます。
リーリー リーリー リーリー

＃＃＃あなたが気づくでしょう：＃＃＃

クリップボード データには

<b>foobar</b>

(

PASTE HTML:
1. の後の内容を参照) が含まれていますが... 実際に貼り付けられた HTML では、b 要素に
style="font-size: 14px;"
2. が設定されています (14px サイズは contenteditable の親から取得されます)。 ソースのクリップボード データでフォント サイズが指定されていないため、貼り付けた HTML にフォント サイズを設定しないでください。

質問:

ソース HTML にフォント サイズがない場合に、貼り付けた HTML にフォント サイズを設定しないように Chrome に強制するにはどうすればよいですか?

回避策として、ソース上で font-size: unset/revert

を設定しましたが、その結果、貼り付けられた HTML の中央にも

font-size: unset

が表示されてしまいました。貼り付けた HTML にフォント サイズを表示したくないのです。 このコードのコンテキストは、ターゲットに貼り付けられるテキスト/HTML データを制御する Chrome 拡張機能です。ターゲットの contenteditable に貼り付けイベント リスナーをアタッチできますが、貼り付けた後にコンテンツの HTML/スタイルを変更することはできません。

Answer 1

貼り付けイベントをインターセプトし、貼り付けられたコンテンツを変更して、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('<', '<').replaceAll('>', '>') '

';
});
};

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

ソーステキスト: foobar


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

Answer 2

Answer 3

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

• ペースト イベント ハンドラーで、現在の選択内容を表す Range オブジェクトを取得します。
• createContextualFragment() メソッドにより、この Range オブジェクトを使用して、貼り付けられた HTML マークアップを DocumentFragment オブジェクトに解析します。
以前に選択したコンテンツを削除します (
• Range#deleteContents() )。
Insert
• 手順 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();
});
};<', '<').replaceAll('>
div[コンテンツ編集可能] {
  境界線: 1 ピクセルの黒一色。
}

ソーステキスト: 

foobar

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

Answer 4