从 contenteditable div 中获取已删除的节点（Froala 编辑器）答案

【问题标题】：Get Removed Nodes from contenteditable div(Froala Editor)从 contenteditable div 中获取已删除的节点（Froala 编辑器）
【发布时间】：2021-04-23 17:55:41
【问题描述】：

我正在尝试使用 MutationObserver 从 contenteditable 元素（在本例中为 Froala 编辑器）中获取已删除节点，但在本例中 .comment 没有获取已删除元素的类，我得到了像 .fr-marker 这样的奇怪类。所以我正在寻找的是每次从编辑器中删除类 .comment 的元素以记录该元素 .data-comment 属性。一旦我得到了removedNode，我就知道如何处理获取数据属性。

这是完整示例的小提琴：https://jsfiddle.net/chille1987/urwoLqsf/16/

HTML

<div id="elem">
    <p>Click and <b>edit</b>, please</p>
    <p>Another paragraph goes here</p>
    <p>Third paragraph with <span class="comment" data-comment="2345">comment inside</span></p>
</div>

<link href="https://cdn.jsdelivr.net/npm/froala-editor@3.2.6/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@3.2.6/js/froala_editor.pkgd.min.js"></script>

这是我的 JS 文件

var editor = new FroalaEditor('#elem', {
    events: {
        'initialized': function () {
            let observer = new MutationObserver(mutationRecords => {
                mutationRecords.forEach(mutation => {
                    mutation.removedNodes.forEach(node => {
                        console.log(node.classList.value)
                    })
                }); // console.log(the changes)
             });

            // observe everything except attributes
            observer.observe(document.querySelector('.fr-view'), {
                childList: true, // observe direct children
                subtree: true // and lower descendants to
            });
        }
    }
});

css 中高亮的注释类

.comment {
    background: yellow;
}

这是删除最后一段并带有注释后的控制台。

【问题讨论】：

标签： javascript dom mutation

【解决方案1】：

实际上，您的代码应该可以工作。您看到的是 Froala 编辑器如何处理编辑内容。最终，您将获得正确的元素，您所需要做的就是过滤移除的节点：

mutation.removedNodes.forEach(node => {
  if(node.nodeName === 'SPAN' && node.className === "comment"){            
      console.log(node.textContent)
      const attribute = node.attributes.getNamedItem("data-comment")
      console.log(attribute.value)
  }
});

Fiddle

【讨论】：