Prevent removal of jQuery data from tags within editor

[Smashr]

Hey,

First of all ... ContentTools has been a lifesaver ! .. so thank you for all the effort you guys have put into it.

So in our use case there are several jQuery plugins that attach data to HTML tags within the content, and rely on this data to work properly. However, as soon as the ContentTools editor initializes all data associated with the DOM elements within the editor is removed / unlinked.

This can be because of several reasons, two of which may be:

1. ContentTools actually removes all data on each DOM element.
2. ContentTools removes and reinserts the content in a way that does not retain any of the previously attached jQuery data.

jQuery recommends using detach() instead of remove() to preserve any jQuery data attached to the DOM elements, if they need to be removed, modified and appended again.

I hope there's a solution, or a way around this. The inline editor we were previously using did preserve all jQuery data. Have a great day, and best of luck with everything.

[Smashr]

Hey Anthony, just wondering if there are any updates. :) Thanks.

[anthonyjb]

Hi @Smashr,

So as you suspected ContentTools does remove all elements from the page and re-add them (that's effectively the role of mount and unmount against the base Element class.

Solutions are a little tricky because the DOM elements of course are lost and even if you kept a reference to them there's no easy way to map them back. I can think of a couple of approaches you might take to get around this, but none are ideal. For example you could override the fromDOMElement against each ContentEdit element type (e.g https://github.com/GetmeUK/ContentEdit/blob/master/src/scripts/text.coffee#L838) and store a reference to the original element against the new editable element, for example:

    @fromDOMElement: (domElement) ->
        # Convert an element (DOM) to an element of this type
        elm = new @(
            domElement.tagName,
            @getDOMElementAttributes(domElement),
            domElement.innerHTML
            )
        elm._originalElement = domElement
        return elm

This would in theory allow you to access the data help against the original element and possibly reattach it (though the approach you take to doing this will depending on what it is your attempting to do).

The other possible approach would be to use datasets (e.g data-foo="bar") and serialize the data you're storing (as ContentEdit would duplicate data- attributes). This is possible the simplest in terms of not having to override anything in ContentEdit/Tools.

I might be able to offer some better solutions if I can see some examples of what your doing with the stored data.

Hope that's of some help at least,

Ant