Andy Mercer Andy Mercer - 3 months ago 13
Javascript Question

Why are Custom Elements Breaking TinyMCE in WordPress?

Background



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

enter image description here

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:

enter image description here

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

Problem

The custom_elements filter was being used incorrectly. Per the docs, valid_elements and extended_valid_elements both should be written as such:

tagName[attribute1|attribute2|etc]

However, custom_element shouldn't have the attribute part. Instead it is written as such:

tagName

Solution

Change this:

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

To this:

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