WordPress visual editor tinymce how to preserve custom attributes

3
votes

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!

2
wordpresseditortinymce

2 Answers

6
votes

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).

1
votes

use extended_valid_elements to add your custom attribute to existing rule . using valid_elements will break current rule

this is my example 

$args = array(
    'textarea_rows' = > 15,
    'teeny' = > true,
    'quicktags' = > true,
    'media_buttons' = > false,
    'tinymce' = > array('extended_valid_elements' = > "@[data-initial]")
);

wp_editor(get_post_meta($post_id, 'spintaxed_cnt', 1), 'spinner-editor', $args);