Как получить удаленный элемент в contenteditable div?

Я установил корень div в contenteditable и содержит множество элементов img и video. Поэтому, когда пользователь редактирует его и нажимает backspace для удаления одного элемента, как я могу получить, какой пользователь удалил и получить значения атрибутов удаленного элемента?Как получить удаленный элемент в contenteditable div?

источник

2015-06-17 user4878054

Поделитесь, что вы пробовали, или разместите свой код – Shin

Если вас интересует удаленный элемент и его свойства, одним из способов является установка MutationObserver для отслеживания изменений в DOM. Его обратный вызов предоставляет изменения и затрагиваемые элементы и другую полезную информацию.

(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/

Посмотрите на него в других браузерах тоже, так как contenteditable имеет некоторые интересные ароматы.

источник

2015-06-17 06:28:59 dakab

Я просто думал, что если я получу элемент перед текущим курсором, но как? :) – user4878054

Интересный вопрос Дакаб, я пытаюсь проверить это на Chrome с Jsfiddle url, но он не работает для меня. –

@ user4878054: «MutationObserver» предоставляет информацию о изменениях DOM («мутации»). Вы увидите, какие элементы были удалены и каковы их свойства, но позиция курсора является предметом сама по себе. – dakab

https://developer.mozilla.org/en-US/docs/Web/Events/input

Зарегистрируйте EventListener для события input. Если вам нужна поддержка IE, вы можете вместо этого использовать событие keypress.

событие может активироваться до фактических СЛУЧИЛИСЬ изменения и keypress может не зарегистрировать пасту и сократить изменений, так что вы хотите, чтобы обрабатывать эти события, а также (input пожаров на тех, кто тоже).

Затем вычислите разницу до и после редактирования, проанализируйте ее и оттуда.

источник

2015-06-17 06:27:16 Rouby

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: Добавлен OnKeyDown для старших версий IE.

источник

2015-06-17 06:46:56 Lain

Как получить удаленный элемент в contenteditable div?

ответ

Смежные вопросы