时间戳

首页 > 解决方案 > Tinymce 中的标签重叠（进入另一个标签内）

javascript - Tinymce 中的标签重叠（进入另一个标签内）

问题描述

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

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

在此处输入图像描述

现在按键盘上的主页按钮或使用箭头键并转到编辑器窗口的大部分左侧，即在新添加内容之前。请参阅下图中突出显示的光标位置： 在此处输入图像描述

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

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

任何人都知道为什么会发生这种情况以及如何解决这个问题？

标签： javascripthtmltinymcetinymce-5tinymce-plugins

解决方案

我知道这种行为是意料之中的，因为许多人使用跨度来表示不同类型的格式，例如颜色、大小写、字体大小等，并且希望能够以相同的格式书写单词的开头和结尾。

但是，如果您不希望出现上述行为，您可以使用不可编辑插件来保护您的标签。请参阅下面的小提琴以获取工作示例： https ://fiddle.tiny.cloud/55haab/1

当我使用这个不可编辑的插件时，我遇到了另一个问题。基本上要使用不可编辑的插件，我们在 tinymce.init 的插件中添加“noneditable”，并在元素中使用“mceNonEditable”类。在我的情况下，当我尝试应用这个提到的类时，我得到了 JS 错误，

tinymce.min.js：9 未捕获的类型错误：无法读取未定义的属性“类”

所以，为了解决这个问题，我在 tinymce.init 中使用“extended_valid_elements”应用这个类：

extended_valid_elements: 'accessfilter[class=mceNonEditable]'

推荐阅读