I am creating a custom plugin that adds a combination of div tags and custom tags in a nested fashion, as shown below:
<div>
<rn:answer_section access="4" title="Cheap">
<div>
<rn:answer_section access="12" title="Email">
<div> </div>
</rn:answer_section>
<div> </div>
</div>
</rn:answer_section>
<div> </div>
</div>
When we add this in source code editor, switch to design mode and then back to source mode again, the content is all stripped and now it looks like this:
<div>
<div>
<div> </div>
<div> </div>
</div>
<div> </div>
</div>
For the custom element rn:answer_section to be recognised by TinyMCE, I have added the following configs to tinymce.init():
verify_html: false,
extended_valid_elements : 'rn:answer_section[access|title|contenteditable]',
custom_elements: 'rn:answer_section[access|title|contenteditable]',
valid_elements: '*[*]',
valid_children: "+body[style],+body[link],+rn:answer_section[div|rn:answer_section], +div[rn:answer_section|div]",
As per TinyMCE documentation for valid_children, by adding the custom element to valid_children config, the entire HTML along with the custom tag rn:answer_section should be retained. The element should not get stripped off.
Interestingly, if we remove the div tags from the original html that only contain nbsp; then the inner custom element rn:answer_section is getting retained but the outer element still gets stripped off.
For example, if we input the below html in source mode:
<div>
<rn:answer_section access=“4” title=“Cheap”>
<div>
<rn:answer_section access=“12” title=“Email”>
</rn:answer_section>
</div>
</rn:answer_section>
</div>
switch to design mode and then back to source code again, then the html looks like this:
<div>
<div>
<rn:answer_section access="12" title="Email">
</rn:answer_section>
</div>
</div>
But that still doesn't help because the outer custom element is still getting stripped out.
How can I make this to work in a way that the custom elements and the div tags are not getting stripped off ? I am using TinyMCE v6.3.x
