WordPress visual editor tinymce how to preserve custom attributes

Question

I am writing a WordPress plugin that adds buttons to the tinymce editor in WP. I am adding custom attributes to DOM elements like data-initial="3" .. but WordPress does not save them. Even if I try to write the custom attributes in the html editor when I switch to the visual editor and back the custom attributes are not there anymore.

Any solutions to make WP preserve custom attributes ?

Thanks!

Answer 1

You need to add your custom attributes to valid_elements in the tinymce init

valid_elements: "@[id|class|title|style|data-initial|...]," + //Your attributes HERE!!!
        "a[name|href|target|title]," +
        "#p,-ol,-ul,-li,br,img[src],-sub,-sup,-b,-i," +
        "-span,hr",

in order to keep them in the editor - otherwise the tinymce cleanup functionality will remove them (because they are not valid).