Why are Custom Elements Breaking TinyMCE in WordPress?

Question

Background

I am working on extending the visual editor inside WordPress, which is just TinyMCE:

I am using a structure of:

<section>
    <controls></controls>
    <content>
        <column class="one-third">
        </column>
        <column class="two-thirds">
        </column>
    </content>
</section>

Problem

The problem is that when I try to change text from Paragraph to Header, nothing happens:

Problem Cause

I've tracked the issue down to using custom elements. When I change my code to use this structure, the problem goes away:

<section>
    <controls></controls>
    <article>
        <div class="one-third">
        </div>
        <div class="two-thirds">
        </div>
    </article>
</section>

Attempted Solutions

I have tried adding column and content to the extended_valid_elements and the custom_elements lists, and that has had zero effect.

$init['custom_elements'] = 'content[*],column[*]';
$init['extended_valid_elements'] = 'content[*],column[*]';

Question

Is there anything that pops out immediately that I'm doing completely wrong? Is there a way to get around this, or to force TinyMCE to treat my custom elements as valid?

Answer 1

Problem

In the custom_elements declaration, you used content[*], column[*] instead of content, column. While the extended_valid_elements does require the attributes to be declared, custom_elements doesn't.

Per the TinyMCE docs: https://www.tinymce.com/docs/configure/content-filtering/#custom_elements

Solution:

Change this:

$init['custom_elements'] = 'content[*],column[*]';
$init['extended_valid_elements'] = 'content[*],column[*]';

To this:

$init['custom_elements'] = 'content,column';

Edit

Please note, it is critical that there are no spaces included in the comma-delimited lists.

'content,column'; <--- works.

'content, column'; <--- doesn't work.