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

Question

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

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

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

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

我已经尝试noneditable通过将令牌包含在带有mceNonEditable类的范围中来使用插件,但这不符合预期,例如,如果令牌位于内容的末尾,则无法退格删除令牌在它之后键入等

因此,为了澄清,我本质上想要的是TinyMCE将某些文本视为图像.它将是一个坚固的块,也被视为一个字符/元素.

这可能吗？

谢谢.

Answer 1

在尝试了大约100种不同的工作后,我们终于找到了一种有效的解决方案(无论如何我们的需求).

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

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

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

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

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

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