javascript - 如何使 TinyMCE 编辑器中的元素被视为不可编辑的单个项目？

Question

在我们的 CMS 中，我们的用户可以使用 TinyMCE 编辑表单的错误消息。问题是，其中一些消息可能需要动态数据，例如“您选择的名称‘X’无效”。

为此，我们使用 token 。以上面为例，我们的用户将输入 “您选择的名称 '{name}' 无效”，它会在渲染时被替换。

我目前正在为 TinyMCE 编写一个插件，以更好地帮助用户管理这些 token 。他们会单击该图标，从预定义列表中选择一个标记，然后它会自动插入到内容中。

问题 我遇到的是内容编辑器中如何处理此 token 。目前，它只是可以编辑的文本，但我想做的是让 TinyMCE 将其视为单个元素，以便可以删除、移动它，但不能编辑实际的标记本身。

我尝试使用 noneditable 插件，将 token 包装在带有 mceNonEditable 类的范围内，但这并不像预期的那样运行，例如你不能退格删除 token ，如果 token 位于内容的末尾你不能在它后面键入，等等。

澄清一下，我本质上想要的是让 TinyMCE 像对待图像一样对待一些文本。它将是一个实心 block ，也就是被视为一个字符/元素。

这可能吗？

谢谢。

Answer 1

在尝试了大约 100 种不同的解决方法后，我们终于找到了一个有效的解决方案(无论如何满足我们的需求)。

我们正在插入一个已删除所有样式的禁用按钮。例如，

<input type="button" class="token" value="my token" disabled="disabled" />

然后向 onGetContent() 添加一些代码以将输入转换为纯文本。

这个方案，虽然不是很优雅，

1. 使 token 表现为单个字符/项目。
2. 设为只读。
3. 在编辑器的上下文中是动态的，因此我们可以显示我们的 token 文本。

编辑:这就是我们最终的结果。