I have to use the HTML 5 data attribute in Tiny MCE, but the editor always clear them, as it's not an attribute known by the default valid_elements configuration.

So I have 2 problems here:

• the data attribute is dynamic ( it could be data-options, data-test, data-foo, etc... ) So I would need a wildcard value or something.
• I want to allow the data attribute for all tags.

So far, I've tried:

extended_valid_elements : '@[id|class|title|style|data-options]',

And:

extended_valid_elements : '*[id|class|title|style|data*]',

But it doesn't work :(

I have to use the HTML 5 data attribute in Tiny MCE, but the editor always clear them, as it's not an attribute known by the default valid_elements configuration.

So I have 2 problems here:

• the data attribute is dynamic ( it could be data-options, data-test, data-foo, etc... ) So I would need a wildcard value or something.
• I want to allow the data attribute for all tags.

So far, I've tried:

extended_valid_elements : '@[id|class|title|style|data-options]',

And:

extended_valid_elements : '*[id|class|title|style|data*]',

But it doesn't work :(

• javascript
• html
• attributes
• tinymce
• rte

3 Answers 3

extended_valid_elements is not the best choice here. Hava a look at the valid_elements setting. Here is an example

    // The valid_elements option defines which elements will remain in the edited text when the editor saves.
    valid_elements: "@[id|class|title|style|data-options|data*]," +
    "a[name|href|target|title]," +
    "#p,-ol,-ul,-li,br,img[src|height|width],-b,-i,-u," +
    "-span[data-mce-type],hr",

I am using:

extended_valid_elements: "+@[data-options]"

and it works for me. (TinyMCE 4.3.11. Notice the + sign?)

I setup for certain element and add all necessary attributes like this

extended_valid_elements: "a[id|class|title|style|data-*|hx-*]"