为什么自定义元素会破坏 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';

编辑

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

'content,column'; <--- 有效。

'content, column'; <--- 不起作用。

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

Why are Custom Elements Breaking TinyMCE in WordPress?

javascript

wordpress

tinymce

背景

问题

问题原因

尝试过的解决方案

问题

问题

解决方案：

编辑