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

Question

我想有一个contentEditable div，它将包含用户输入的XML。 我如何在每个节点上存储一组隐藏数据，即使在剪切/粘贴（即移动）后仍会存在？

我已经尝试将嵌套在XML中的隐藏元素，假设在剪切/粘贴期间浏览器会移动元素，但它会被删除。

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

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

Answer 1

显然我没有做足够的测试。 只要您为元素提供至少一个属性，并且您不使用display:none ，剪切/粘贴似乎就会起作用。 我现在能够在每个节点内部有一个空的<span>元素，它可以在一个属性中存储一个哈希，用于将节点与内存中的对象相关联。

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

但是，我遇到了另一个问题。 在节点内使用退格/删除有时会删除元素，这是不理想的。 我通过绝对将元素放在页面上来解决这个问题。 它实际上现在表现得相当直观。 如果删除包装它的XML，则删除该元素，否则它将保持不变。

请注意，我只在Chrome（21）中对此进行了测试，因此我不知道这是与其他浏览器一起使用的。 如果有人可以分享更优雅的解决方案，请做。