如何将TinyMCE编辑器中的元素视为不可编辑的单个项目？

Question

在我们的CMS中，我们的用户可以使用TinyMCE编辑表单的错误消息。问题是，这些消息中的一些可能需要动态数据，例如， "Your chosen name 'X' is invalid"。

为此，我们使用令牌。使用上面的例子，我们的用户会输入"Your chosen name '{name}' is invalid"，它会在渲染时被替换。

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

问题我有在内容编辑器中如何处理此令牌的问题。目前，它只是可以编辑的文本，但我想要做的是让TinyMCE将其视为单个元素，以便可以删除，移动，但实际的令牌本身无法编辑。

我已经尝试使用noneditable插件将令牌包裹在mceNonEditable类的范围内，但这不符合预期，例如：你不能退格删除令牌，如果令牌位于你不能在其后面输入的内容的末尾，等等。

所以澄清，我真正想要的是TinyMCE将某些文字视为图像。它将是一个固体块，a.k.a。被视为一个字符/元素。

这可能吗？

谢谢。

Answer 1

在尝试了大约100种不同的工作后，我们终于找到了一种有效的解决方案（无论如何都是为了我们的需要）。

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

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

然后在onGetContent（）中添加一些代码，将输入转换为纯文本。

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

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

修改：这就是我们最终的目标。

Answer 2

作为一个鸭子程序员，我不得不问 - 你不能使用图像吗？我认为TinyMCE使用了表情符号，也许你可以用“元素”替换它们，并允许客户插入它们并保存转换为代币。

Answer 3

您可以使用图片标记作为令牌。如果在用户提交错误消息表单后替换它，则使用tinymce UI按钮插入此图像应该有效。例如，您插入的图像标记可能如下所示

<img  src="../image/token1.gif" class="token1">

这样，您只需在提交/保存后用类token1替换图像标记。

Answer 4

我知道这有点晚了，但是现在使用插件https://www.tiny.cloud/docs/plugins/noneditable/

对此提供了支持。

Answer 5

真正的答案是使用noneditable插件。

https://www.tiny.cloud/docs/plugins/noneditable/#noneditable_editable_class

这就是您想要的。