从 contenteditable div 中获取已删除的节点（Froala Editor）

我正在尝试使用 MutationObserver 从 contenteditable 元素（在这种情况下为 Froala Editor）中获取 removeNodes，但在这种情况下，.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/[email protected]/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/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;
}

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