如何在剪切/粘贴/移动后在contentEditable DIV中保留与XML相关的数据

How to preserve data associated with XML inside contentEditable DIV after cut/paste/move

本文关键字：保留 XML 数据 contentEditable 粘贴移动 DIV 更新时间：2023-09-26

我想要一个contentEditablediv，它将包含用户输入的XML。我该如何在每个节点上存储一组隐藏的数据，这些数据即使在剪切/粘贴（即移动）后也会持续存在？

我尝试过在XML中嵌套一个隐藏元素，假设在剪切/粘贴过程中浏览器会移动该元素，但它会被删除。

可以选择为每个节点生成一个索引/哈希作为属性，并将其与内存中的对象相关联，但出于可用性原因，我希望避免这种情况。

这样做的目的是精简XML，使其更具可读性，而不是拥有大量属性。

很明显，我没有做足够的测试。似乎只要给元素至少一个属性，并且不使用display:none，剪切/粘贴就可以工作。现在，我可以在每个节点中有一个空的<span>元素，它可以在一个属性中存储一个散列，用于将节点与内存中的对象相关联。

使用$('span').data()添加到该元素的数据在剪切和粘贴后不会持久存在，但这是意料之中的，因为浏览器此时显然会创建一个新元素。

但是，我遇到了另一个问题。在节点中使用退格/删除有时会删除元素，这并不理想。我通过将元素绝对定位在页面之外来解决这个问题。实际上，它现在的行为相当直观。如果删除了包装该元素的XML，则该元素将被删除，但在其他情况下，该元素将持续存在。

注意，我只在Chrome（21）中测试过这个，所以我不知道它能与其他浏览器一起使用。如果有人可以分享一个更优雅的解决方案，请这样做。