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

Question

我正在尝试使用 MutationObserver 从 contenteditable 元素（在本例中为 Froala Editor）获取 removedNodes，但在本例中没有获取 class 已移除元素 .comment 我变得很奇怪class 和 .fr-marker 一样。所以我正在寻找的是每次从编辑器中删除带有 class .comment 的元素以记录该元素 .data-comment 属性。一旦我得到那个 removedNode，我知道如何处理获取数据属性。

这是 fiddle 的完整示例：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
            });
        }
    }
});

评论 class 在 css

中突出显示

.comment {
    background: yellow;
}

这是删除最后一段带有评论后的控制台。

Answer 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

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

Get Removed Nodes from contenteditable div(Froala Editor)

javascript

dom

mutation