How to get a deleted element in a contenteditable div?
Question
I set the root div to contenteditable , and it contains many img and video elements. So when a user edits it and presses backspace to delete one element, How can I get which one the user deleted and get the deleted element's attributes values?
3 answers
solution1
0 2015-06-17 06:27:16
Register an eventlistener for the event input . If you need IE support you might consider using keypress event instead.
The events might fire before the actual change happend, and keypress might not register paste and cut changes, so you want to handle those events as well ( input fires on those too).
Then calculate the difference before and after the edit, analyse it and there you go.
solution2
0 ACCPTED 2015-06-17 06:28:59
If you're interested in the deleted element and its properties, one way is to set a MutationObserver to track modifications to the DOM. Its callback provides changes and affected elements and other userful information.
(new MutationObserver(function(mutations){
mutations.forEach(function(mutation){
if(mutation.type=='attributes')
console.log('Element attributes may have changed, see record:',mutation);
else
if(mutation.type=='childList')
console.log('Child nodes were modified, see record:',mutation,
'or removedNodes:',mutation.removedNodes);
});})).observe(document.getElementById('edit'),{
subtree:true,
attributes:true,
childList:true,
characterData:true,
characterDataOldValue:true
});
Fiddle: https://jsfiddle.net/0tdm1wwv/2/
Take a look at it in other browsers too, since contenteditable has some interesting flavors.
solution3
0 2015-06-17 06:46:56
https://jsfiddle.net/814j80z2/
<html>
<head>
<script>
var myContent = {
currentList: [], //List since last time.
initialList: [], //Starting list, just if we need it at some point.
//Storing all current nested elements in currentList and initialList
Init: function(){
var tRoot = document.getElementById('Contenteditable');
var tL = document.querySelectorAll('a, img'); //Or just all '*'.
for(var i=0, j=tL.length; i<j; i++){
this.currentList.push(tL[i]);
this.initialList.push(tL[i]);
}
if (!tRoot.oninput) tRoot.oninput = function(){myContent.onInput(this)} //Depending on your requirements use others.
if (!tRoot.onkeyup) tRoot.onkeyup = function(){myContent.onInput(this)} //Depending on your requirements use others.
},
//Comparing current nested elements with currentList and set new currentList
checkChangedElements: function(e){
if (e){
var tE = []; //Storing the exceptions.
var tN = []; //Our new current list.
var tC = []; //Current elements:
var tL = document.querySelectorAll('a, img'); //Or just all '*'.
for(var i=0, j=tL.length; i<j; i++) tC.push(tL[i]);
for(var i=0, j=myContent.currentList.length; i<j; i++){
//if (tC.some(function(item){return item === myContent.currentList[i]}) tE.push(tL[i])
if (tC.indexOf(myContent.currentList[i]) === -1) tE.push(myContent.currentList[i])
else tN.push(myContent.currentList[i])
}
myContent.currentList = tN;
return tE;
}
},
//Our input function firing each two seconds
onInput: function(e){
if (e){
if (e.inputTimer) clearTimeout(e.inputTimer); //We fire it after two seconds without any input
e.inputTimer = setTimeout(function(e){
var tL = myContent.checkChangedElements(e);
e.inputTimer = null;
console.log('Deleted elements: ', tL)
}.bind(undefined, e), 2000)
}
}
}
</script>
</head>
<body onload = 'myContent.Init()'>
<div contenteditable = 'true' id = 'Contenteditable'>
<img alt = '' src = 'https://www.google.com//images/srpr/logo11w.png' />
<a href = 'https://www.google.com/'>Google</a>
<img alt = '' src = 'https://www.google.com//images/srpr/logo11w.png' />
<a href = 'https://www.google.com/'>Google</a>
<img alt = '' src = 'https://www.google.com//images/srpr/logo11w.png' />
<a href = 'https://www.google.com/'>Google</a>
<img alt = '' src = 'https://www.google.com//images/srpr/logo11w.png' />
</div>
</body>
</html>
Edit: Added onkeydown for elder IE versions.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.