标签在 Tinymce 中重叠(进入另一个标签)

Tags are overlapping (going inside another tags) in Tinymce

我们在我们的项目中使用 Tinymce 5.6.2 并面临着非常奇怪的问题。我们有两个自定义按钮,当您单击它们时,它们会添加一些 HTML(例如 span 标签)。因此,要重现该问题,首先单击 Button1,这将在 HTML 下方插入编辑器 window:

<p><span class="container1"><span class="icon1">1</span>[[Test One]]</span></p>

现在按键盘上的主页按钮或使用箭头键,然后转到编辑器的大部分左侧 window,即就在新添加的内容之前。请参见下图中突出显示的光标位置:

现在单击 Button2,将插入另一个 HTML。从技术上讲,它应该在 Button1 内容之前插入新的 HTML,因为我们已将光标移到编辑器 window 的开头和 Button1 内容之前,但是当您看到编辑器 window 的代码时,您会发现第二组HTML 个元素已插入 Button1 的 HTML。见下图:

我创建了一个 fiddle 来重现这个问题:https://fiddle.tiny.cloud/f5haab/3

有人知道为什么会发生这种情况以及如何解决这个问题吗?

我知道这种行为是预料之中的,因为许多人将 span 用于不同类型的格式,例如颜色、大小写、字体大小等,并希望能够以相同的格式编写开头和结尾一句话。

但是,如果您不希望出现上述行为,您可以使用 noneditable plugin 来保护您的标签。工作示例见下文 fiddle: https://fiddle.tiny.cloud/55haab/1

当我使用这个不可编辑的插件时,我 运行 进入了另一个问题。基本上要使用不可编辑的插件,我们在 tinymce.init 的插件中添加“noneditable”,并在元素中使用“mceNonEditable”class。在我的例子中,当我尝试应用这个提到的 class 我收到 JS 错误,

tinymce.min.js:9 Uncaught TypeError: Cannot read property 'class' of undefined

所以,为了解决这个问题,我在 tinymce.init 中使用“extended_valid_elements”应用了这个 class:

extended_valid_elements: 'accessfilter[class=mceNonEditable]'

我们有两个方向可以尝试: