I'm modifying an HTML editor. On pasting, I need to manipulate some of the pasted HTML to adjust the attributes of the pasted nodes to identify them as duplicates.
I can intercept the paste when the user enters control + V, but it doesn't seem possible to redirect the paste when the user goes through the browser's context menu. I'm using the onpaste event in this case, getting the initial range and then using timeouts, when the range changes, I want to try to get all the nodes. How can I do this?
If I keep a reference to the TextRange object, the offsetWidth changes after the paste. I can call select() on the range and it selects exactly what was pasted. However, the offsetLeft doesn't seem to be correct, which I think is because the DOM changed. I'm trying to solve this for (older) IEs first because they're definitely the trickiest and for now, I need to support them.
Here's simplified sample code (the 500ms timeout is arbitrary):
inner.htm:
<!DOCTYPE html>
<html>
<head>
</head>
<body topMargin="1" leftMargin="1" contentEditable="true" onblur="">
<div>First section PASTE</div>
<div>HERE Second section</div>
<div>This is <div>COPY</div>ME text</div>
</body>
</html>
outer.htm:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
function getIfrmDoc() {
var ifrm = document.getElementById('ifrmain');
return ifrm.contentDocument || ifrm.contentWindow.document;
}
window.onload = function () {
var doc = getIfrmDoc();
doc.body.onpaste = function (e) {
var rng = doc.selection.createRange();
setTimeout(function () {
handlePastedData(rng);
}, 500);
}
}
function handlePastedData(initRange) {
// What can I do here?
initRange.select();
//alert(initRange.offsetWidth);
}
</script>
</head>
<body>
<iframe id="ifrmain" src="inner.htm" style="width: 100%; height: 450px;"></iframe>
</body>
</html>
So if you open outer.htm, and then copy a couple characters from anywhere, pasting it before the word "PASTE", it will give an offsetLeft of 1 even there are a few words before it.
In handlePastedData, how can I iterate through all the pasted nodes? I've tried to adapt various solutions from various other questions but haven't found anything that will work for this scenario.
Thanks!