TinyMCE, allow data attribute

Question

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 :(

Carmina

Answer 1

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",

Epigraphy

Why extended_valid_elements is not the best choice ? Also, from what I've understood, the valid_elements option must define all the tags&attribute, as it will override the default one (it will not add/append/merge my definition to the actual one). I don't want my TinyMCE initialization to be 300+lines longs at every place I need the editor... – Carmina

In this case you are not adding new elements to the editor. You want to add an attribute only. It might not be very concenient, but does it work using the valid_elements parameter? – Epigraphy

@Epigraphy , I am having the same issue as FMaz008, but with tinymce stripping out my input 'style' attribute. I have valid_elements : "@[id|class|style|title|dir<ltr?rtl|lang|xml::lang],", etc.. but it seems to ignore that 'style' is listed there. If I add [style] to the specific tag I am using for my test (in the valid_elements def.) , it still does not work. – Gambado

yes, Thariama is correct. See here if you are using CodeIgniter and also thinking that tinymce is stripping out more than your tinymce config. says it should be stripping: #10290621 – Gambado

Answer 2

I am using:

extended_valid_elements: "+@[data-options]"

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

Merrymaking

This works for me but custom attribute is not supported – Samella

Sorry, this isn't working for me. Can you give a bit more details? – Lalise

Thank you, saved my day. Custom attributes are indeed not supported, because AFAIK they are not valid HTML, but you can use HTML5 custom data attributes ("data-*", as in "data-myamazingcustomattribute") – Alli

Answer 3

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

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

Smallminded