preventDefaultの後に貼り付けイベントを作成する方法は？

私はpasteイベントを検出し、太字、斜体以外のすべてのインラインCSSとHTMLタグを削除するためにデータを操作し、パラする必要が角度4を使用してのcontentEditablepreventDefaultの後に貼り付けイベントを作成する方法は？

<div contenteditable='true' id='editor' [innerHtml]='data'></div>

上で動作するようにしようとしていますそれを通常のテキストとして貼り付けます。

私はpastedDataを操作することができますが、ペーストの動作を開始することはできませんよ

document.getElementById('editor').addEventListener('paste', handlePaste); 
function handlePaste(e) { 
    var clipboardData, pastedData; 
    // Stop data actually being pasted into div 
    clipboardData = e.clipboardData; 
    pastedData = clipboardData.getData('text/html'); 
    e.stopPropagation(); 
    e.preventDefault(); 
}

によってpasteイベントを検出に成功しています。 preventDefaultとstopPropagationを使用して、私はpasteのデフォルトの動作を止めることができます。また、getDataを使ってクリップボードからデータを抽出することもできます。しかし、今私はここにこだわっている、私はペーストイベントを開始することはできません。ドキュメントでは、のpasteClipboardData（newData）のようなカスタムイベントを作成する必要があると言われています。しかし、私はどのようにそのようなイベントを作成するかについての任意の参照を見つけることができます。

//我々がペースト操作をキャンセルしているので、我々は手動で

//ドキュメントにデータを貼り付ける必要があります。

pasteClipboardData（newData）;

https://w3c.github.io/clipboard-apis/#override-paste

出典

2017-10-09 Arghya Saha

「新しいClipboardEvent（）」（[spec]（https://www.w3.org/TR/clipboard-apis/#dom-clipboardevent-clipboardevent））を使用して（信頼できない）貼り付けイベントを作成し、元のイベントのターゲットで 'dispatchEvent'を使って起動してください – Touffy

私はすでに試してみました。それは動作していません –

おそらく、それは信頼できないイベントです。別の角度から問題に近づく必要があります。 [MutationObservers]（https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver）は 'contenteditable'要素を扱う有効な方法です。 – Touffy

あなたは別のpasteイベントを送出する必要はありません。希望のコンテンツをcontenteditableに挿入するだけです。

はここdocument.execCommand("insertHTML", ...)を使った例だ - それはIEで動作させるために（this oneのような）他の質問を参照してください。

window.onload = function() { 
 
    document.addEventListener('paste', function(e){ 
 
    console.log("paste handler"); 
 
    var s = e.clipboardData.getData('text/html').replace("this", "that") 
 
    document.execCommand("insertHTML", false, s); 
 
    e.preventDefault(); 
 
    }); 
 
}

<html> 
 
<p>1) copy <b>this</b> text</p> 
 
<div contenteditable id="target"> 
 
    <p>2) paste it here: ... ('this' should be replaced by 'that')</p> 
 
</div>

preventDefaultの後に貼り付けイベントを作成する方法は？

答えて

関連する問題