Configure TinyMCE 4 to allow inline element or anchor tag (a) to be the top level element

Question

Basically, I want to place an anchor element as the top level element, but TinyMCE enforces it's own ideas every time the source code panel is closed.

Disclaimer: TinyMCE is an amazing free wysiwyg editor tool. I am just having a really bad day with it.

It pains me that TinyMCE, supposedly "the most advanced wysiwyg html editor", often can't even let you enter the html you want without screwing it all up for you the second you save or close the source code view.

All I want to do, is to be able to close the editor, leaving my code (or even just anchor elements) intact. But no matter what options or configuration I pass to TinyMCE, it repeatedly tears my code asunder; carelessly scattering elements about the document like shards of broken dreams.

<!-- Casually transforming this -->

<a class="box" href="#">
 <div class="title">Box Title</div>
 <p>This is the box content!</p>
</a>

<!-- into this -->

<p><a class="box" href="#"></a></p>
<div class="title"><a class="box" href="#">Box Title</a></div>
<p><a class="box" href="#">This is the box content!</a></p>
<p></p>

For some reason best known to themselves they have removed the life-saving cleanup option allowing you to disable this abomination entirely, and I cannot get any of the valid_elements/children options to work correctly. (a[*], etc)

I have spent the last 3 hours scouring their documentation, forums and stack overflow, but to no avail whatsoever. My only solace was finally being able to put block-level elements within anchor tags, but this only solves part of my problem.

The main issue I am facing is that TinyMCE will not allow me to place an anchor tag, containing block-level elements, at the top level. Anybody know how to configure TinyMCE to allow this?

TinyMCE Code (stripped down to relevant):

tinymce.init({
    selector: 'textarea.wysiwyg',
    schema: "html5",        
    element_format : 'html',
    plugins: ['codemirror'],
    convert_urls: false,
    valid_elements: "*[*]",
    valid_children: "+body[a],+a[div|h1|h2|h3|h4|h5|h6|p|#text]",
    //apply_source_formatting: false,                // removed I think
    //verify_html: false,                            // removed :'(
    codemirror: { indentOnInit: true },
    content_css: '/Content/Styles/Sass/main.css'
});

Matthew Hudson Matthew Hudson · Accepted Answer · 2016-08-22T16:10:12

The solution is to disable forced_root_block.

tinymce.init({
    ...
    forced_root_block : false, // default = 'p' >= 3.0a1
});

This feature automatically ensures that any non block elements or text nodes are wrapped in block elements.

For example something will result in output like something.

Documentation Reference

Configure TinyMCE 4 to allow inline element or anchor tag (a) to be the top level element

1 Answers