How to configure TinyMCE to allow block-level elements inside anchor (a) tag?

Question

Here is my scenario:

I want to be able to create content like

<div> <a id="supportTile" class="contentModule" href="/Support"> <h2>Support</h2> </a> </div>

However tinyMCE strips it to

<div> <h2>Support</h2> </div>

My configuration is currently like this (using TinyMCE jQuery):

script_url: _applicationRoot + "Scripts/tiny_mce/tiny_mce.js",
theme: "advanced",                    
plugins: "paste,filemanager,imagemanager,advimage,inlinepopups",
...
extended_valid_elements: "img[!src|border:0|alt|title|width|height|style|name|id|class],a[href|target|title|onclick|name|id|class],article[name|id|class],div[name|id|class],section[name|id|class]",
schema: "html5",               
...
convert_urls: true,
document_base_url: _applicationRoot

I tried setting verify_html: false but no luck.

I tried removing extended_valid_elements and replacing it with:

valid_elements: "*[*]",
verify_html: false

No luck either.

Can you see something wrong with my configuration? Is this achievable at all?

Thanks!

Answer 1

Yes, this should be achievable. In order to be able to produce output like

<div> <a id="supportTile" class="contentModule" href="/Support"> <h2>Support</h2> </a> </div>

you will have to modify the tinymce setting valid_children and valid_elements. You need to be aware that there is a default setting which you might need to enlarge.

valid_elements: "*[*]" won't work because of a bug that hopefully will be removed in the newest or next version.

I use this settings (i don't use divs nor h2s)

valid_elements: "@[id|class|title|style],"
+ "a[name|href|target|title|alt],"
+ "#p,-ol,-ul,-li,br,img[src|unselectable],-sub,-sup,-b,-i,-u,"
+ "-span[data-mce-type],hr",

valid_child_elements : "body[p,ol,ul]"
+ ",p[a|span|b|i|u|sup|sub|img|hr|#text]"
+ ",span[a|b|i|u|sup|sub|img|#text]"
+ ",a[span|b|i|u|sup|sub|img|#text]"
+ ",b[span|a|i|u|sup|sub|img|#text]"
+ ",i[span|a|b|u|sup|sub|img|#text]"
+ ",sup[span|a|i|b|u|sub|img|#text]"
+ ",sub[span|a|i|b|u|sup|img|#text]"
+ ",li[span|a|b|i|u|sup|sub|img|ol|ul|#text]"
+ ",ol[li]"
+ ",ul[li]",

Answer 2

I found an alternative way of doing this and thought of sharing! There's a flag called allow_html_in_named_anchor which keeps any HTML inside the anchor.