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

时间:2012-08-23 12:24:35

标签: javascript xml html5 contenteditable

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

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

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

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

1 个答案:

答案 0 :(得分:1)

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

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

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

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