TinyMCE editor does not allow nesting custom elements

Question

When I add below HTML in editor consecutively twice, the editor adds them in a nested fashion i.e, lets say I execute the following commands:

tinymce.activeEditor.execCommand('mceInsertContent', false,`<div contenteditable="false">
<div contenteditable="true">OUTER
</div>
</div>`)

tinymce.activeEditor.execCommand('mceInsertContent', false,`<div contenteditable="false">
<div contenteditable="true">OUTER
</div>
</div>`)

then the generated HTML code is nested as shown below:

<div>
<div contenteditable="false">
<**div** contenteditable="true">OUTER
<div contenteditable="false">
<div contenteditable="true">OUTER</div>
</**div**>
</div>
</div>
</div>

Note the <div> tags highlighted in bold, they are nesting the inner set of <div> tags.

Now if I run the same command with a custom element, say <mydiv> and <div> tags, as shown below:

tinymce.activeEditor.execCommand('mceInsertContent', false,`<div contenteditable="false">
<mydiv contenteditable="true">OUTER  
</mydiv>
</div>`)

tinymce.activeEditor.execCommand('mceInsertContent', false,`<div contenteditable="false">
<mydiv contenteditable="true">OUTER  
</mydiv>
</div>`)

then the generated HTML looks like this:

<div>
<div contenteditable="false"><**mydiv** contenteditable="true">OUTER</**mydiv**>
<div contenteditable="false"><**mydiv** contenteditable="true">OUTER </**mydiv**></div>
</div>
</div>

Note the 1st set of highlighted <mydiv> tags have closed before the 2nd set of custom <mydiv> tag has opened.

I want my custom <mydiv> tag to exhibit the same behaviour like <div> tags.

How can I achieve this ?

I have the following configs in tinymce.init():

extended_valid_elements : 'mydiv[contenteditable]',
custom_elements: 'mydiv[contenteditable]',
valid_children: "mydiv[*], div[*]"

setup: (editor: tinymce.editor) => {
                editor.on('BeforeSetContent', e => {
                // Allow <div> and <mydiv> elements in editor content
                e.content = e.content.replace(/<div>/g, '<div data-mce-bogus="1">');
                e.content = e.content.replace(/<mydiv>/g, '<mydiv data-mce-bogus="1">');
                });
}

Fiddle to demonstrate this issue - https://jsfiddle.net/raq007/eLask6t7/33/

TinyMCE editor does not allow nesting custom elements

0 Answers0