Question

I would like to have a contentEditable div that will contain user-inputted XML. How would I go about storing a set of hidden data on each node, that will persist even after a cut/paste (i.e. move) ?

I’ve tried having a hidden element nested inside the XML, assuming the element would be moved by the browser during the cut/paste, but it gets removed.

There is the option to generate an index/hash for each node as an attribute and associate that with an object in memory, but I want to avoid this for usability reasons.

The purpose of this is to slim the XML to make it more readable instead of having lots of attributes.

Answer 1

Clearly I did not do enough testing. It seems the cut/paste will work as long as you give the element at least one attribute, and you don’t use display:none. I’m now able to have an empty <span> element inside each node that can store a hash in an attribute for associating the node with an object in memory.

Data added to that element with $('span').data() did not persist after the cut and paste, but that was to be expected, since the browser obviously creates a new element at this time.

But, I encountered another problem. Using backspace/delete within the node would sometimes remove the element, which is not ideal. I solved this by absolutely positioning the element off the page. It actually now behaves fairly intuitively. The element is removed if you remove the XML wrapping it, but otherwise it persists.

Note, I only tested this in Chrome (21), so I don’t know this to be working with other browsers. If anyone can share a more elegant solution, please do.