how to enable <meta> tag in TinyMCE 4.0?

Question

In previous version of TinyMCE I was able to use valid_elements : "+*[*]" to enable using <meta> tags but in new version, it does not work anymore! When I go to source code I cannot see the meta tags although they are embedded in html code. So, editing meta tags by source code editor is not possible!

Answer 1

I was in the same situation than you (TinyMCE 4 VS markups).

In fact my goal was to handle this video markup example : https://support.google.com/webmasters/answer/2413309?hl=en

I wanted TinyMCE to not touch anything ^^

In the "tinymce.init" function, just add :

extended_valid_elements : "div[*],meta[*],span[*]",
valid_children : "+body[meta],+div[h2|span|meta|object],+object[param|embed]",

And you'll be fine.

---

The "extended_valid_elements" option allows you to override the behaviour of specified markups. Like you'll read in the official documentation, you have to be careful to include all default values because you are currently overriding them. Personally I didn't bother and allowed every attributes with [*]

That's not very clean, I would rather use this option :

 extended_valid_elements : "@[itemscope|itemtype|itemprop|content],div,meta,span",

to properly authorize new attributes for those 3 markups but again you have to specify ALL default values (for example with just this line, the "id" attribute for div markups was cleaned...)

The "valid_children" option allows you to authorize curious embed markups regards to the official XHTML schemas : that's exactly what we want here. With this configuration, TinyMCE will not reorder unexpectedly your markups.

Hopes this helps !

Regards

Answer 2

There's lots of issues with tags like that in a contenteditable based editor, tinyMCE 4 has solved it by adding a new plugin that keeps the doctype, title, and meta tags in memory and dynamically adds it to the editor when viewing source and submitting the form. It's called fullpage. I also think that this plugin links any stylesheet that's added with the content_css setting.