javascript - 为什么自定义元素会破坏 WordPress 中的 TinyMCE？

Question

背景

我正在努力扩展 WordPress 中的可视化编辑器，即 TinyMCE:

我正在使用以下结构:

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

问题

问题是，当我尝试将文本从 Paragraph 更改为 Header 时，没有任何反应:

问题原因

我已将问题追溯到使用自定义元素。当我更改代码以使用此结构时，问题就消失了:

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

尝试的解决方案

我尝试将 column 和 content 添加到 extended_valid_elements 和 custom_elements 列表，这已经零影响。

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

问题

是否有任何事情立即跳出来表明我做错了？有没有办法解决这个问题，或者强制 TinyMCE 将我的自定义元素视为有效？

Answer 1

问题

在custom_elements声明中，您使用了content[*],column[*]而不是content,column。虽然 extended_valid_elements 确实需要声明属性，但 custom_elements 则不需要。

根据 TinyMCE 文档:https://www.tinymce.com/docs/configure/content-filtering/#custom_elements

解决方案:

更改此:

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

对此:

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

编辑

请注意，逗号分隔列表中不得包含空格，这一点至关重要。

'内容，列'; <--- 有效。

'内容，列'; <--- 不起作用。