如何在preventDefault之後創建粘貼事件？

我使用的角度4，並試圖在CONTENTEDITABLE如何在preventDefault之後創建粘貼事件？

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

我需要檢測膏事件，然後操縱數據刪除所有的內聯CSS和HTML標籤比其他加粗，斜體，和對一起工作然後將其作爲普通文本粘貼。

我已經成功地通過

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

我能夠操縱pastedData但不能夠啓動粘貼行爲檢測粘貼事件。使用preventDefault和stopPropagation我能夠停止粘貼的默認行爲，也使用getData我能夠從剪貼板中提取數據。但現在我卡在這裏，我無法啓動粘貼事件。在文檔中，據說我們需要創建一個自定義事件，如pasteClipboardData（newData）。但我可以找到任何有關如何創建此類事件的參考。

//由於我們取消粘貼操作，我們需要手動

//將數據粘貼到文檔中。

pasteClipboardData（newData）;

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

來源

2017-10-09 Arghya Saha

你可以用'new 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", ...)一個例子 - 見其他問題（如this one），使其工作在IE：

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>

相關：overriding the copy event。

來源

2018-01-01 10:52:06 Nickolay

如何在preventDefault之後創建粘貼事件？

回答

相關問題