span 和 div 标签不替换 TinyMCE 中选择的外部 p 标签

Question

我正在使用 TinyMCE 编辑器，我正在尝试编辑 style_formats。我添加了自己的标题：

//...
{ title: 'Headings', items: [
                { title: 'Titre principal', block: 'div', classes: ['title'], wrapper: true },
                { title: 'Titre alternatif', block: 'div', classes: ['title-alt'], wrapper: true },
                { title: 'Titre alternatif (gris)', block: 'div', classes: ['title-alt', 'grey'], wrapper: true },
                { title: 'Titre informatif', block: 'div', classes: ['title-alt', 'infos'], wrapper: true },
                { title: 'Sous-titre', block: 'div', classes: 'subtitle', wrapper: true },
                { title: 'Petit titre', block: 'div', styles: { color: 'var(--violet)', fontFamily: 'var(--playfair)', fontWeight: 'bold' }, wrapper: true }
]},
//...

但它没有按预期工作。当我点击它们时，它会这样做：

<div class="title">
<p>
Text goes here
</p>
</div>

这不是我所期待的。我期待这个输出：

<div class="title">
Text goes here
</div>

没有 p 标签。

以前工作得很好，tinyMCE 附带的标题是 h1、h2、h3，...我的项目中是否缺少其他选项？

此外，我尝试了以下方法：

valid_children : '-div[p]'

但它根本不起作用：当我单击其中一个标题时，它什么也不做。我无法使用此过滤器添加任何 div。

我还尝试为这些标题指定自定义 format，但是当我单击它们时，它们只是替换了它们之前的每个 div。就像，如果我有这个：

<div class="cadre-admin">
<p>
Text goes here
</p>
</div>

选标题就变成这个：

<div class="title">
Text goes here
</div>

有人可以帮忙吗？

我在 tinyMCE 上添加了一个 fiddle。