My custom plugin for tinymce 6 inserts html content like so:
tinyMCE.activeEditor.execCommand('mceInsertContent', false, '<div id="container"><a href="/"><div id="inner">hi</div></a></div>');
However, the inserted content ends up like:
tinyMCE.activeEditor.execCommand('mceInsertContent', false, '<div id="container"><div id="inner">hi</div></div>');
What is happening?
Does it have anything to do with valid elements?
My config includes:
valid_elements: '+*[*]',
extended_valid_elements: 'a[href|target=_blank|class]'
By default TinyMCE doesn't support block-based anchors, such as a <div> within an <a> tag. Explanation here: https://github.com/tinymce/tinymce/issues/3142#issuecomment-241976643
Possible workarounds:
Use an inline element like <span> instead of <div>
<div id="container"><a href="/"><span id="inner">hi</span></a></div>
Use valid_children to add the elements you want inside the anchor element. Here's a fiddle to demo how to do that: https://fiddle.tiny.cloud/Lkiaab (Certain things may not work as expected, for example editing links via the link plugin.)