如何将 TinyMCE 编辑器中的元素视为不可编辑的单个项目? [英] How to make an element in a TinyMCE editor treated as a non-editable single item?
问题描述
在我们的 CMS 中，我们的用户可以使用 TinyMCE 编辑表单的错误消息.问题是，其中一些消息可能需要动态数据，例如您选择的名称‘X’无效".
Within our CMS, our users can edit error messages for forms using TinyMCE. The problem is, some of these messages may require dynamic data, e.g. "Your chosen name 'X' is invalid".
为此，我们使用了令牌.以上述为例，我们的用户将输入 您选择的名称 '{name}' 无效"，它会在渲染时被替换.
To do this, we are using tokens. Using the above as an example, our user would type in "Your chosen name '{name}' is invalid", and it would get replaced on render.
我目前正在为 TinyMCE 编写一个插件，以更好地帮助用户管理这些令牌.他们会点击图标，从预定义的列表中选择一个标记，然后它会自动插入到内容中.
I'm currently writing a plugin for TinyMCE to better help the user manage these tokens. They would click the icon, select a token from a predefined list, and it would get inserted into the content automatically.
问题 我的问题是如何在内容编辑器中处理此令牌.目前只是文本可以编辑，但我想做的是让TinyMCE把它当作一个单独的元素来处理，这样它可以被移除、移动，但实际的token本身是不能编辑的.
The problem I have is how this token is treated within the content editor. At present, it's just text that can be edited, but what I want to do is make TinyMCE treat it as a single element so it can be removed, moved, but the actual token itself can not be edited.
我已经尝试使用 noneditable 插件，将令牌包装在带有 mceNonEditable 类的 span 中，但这并不如预期，例如你不能退格删除令牌，如果令牌在内容的末尾，你不能在它后面输入，等等.
I've tried using the noneditable plugin by wrapping the token in a span with the mceNonEditable class but this doesn't behave as expected, e.g. you can't backspace delete the token, if the token is at the end of the content you can't type after it, etc.
所以澄清，我本质上想要的是 TinyMCE 将一些文本像处理图像一样处理.它将是一个实心块，也就是被视为一个字符/元素.
So to clarify, what I essentially want is for TinyMCE to treat some text like it would an image. It would be a solid block, a.k.a. treated as one character/element.
这可能吗?
谢谢.
推荐答案
在尝试了大约 100 种不同的解决方案后，我们终于找到了一个有效的解决方案(无论如何都满足我们的需求).
After trying about 100 different work arounds, we finally found a solution which works (for our needs anyway).
我们正在插入一个已删除所有样式的禁用按钮.例如，
We're inserting a disabled button with all the styles removed. For example,
<input type="button" class="token" value="my token" disabled="disabled" />
然后向 onGetContent() 添加一些代码以将输入转换为纯文本.
And then adding some code to onGetContent() to convert the input to plain text.
这个解决方案虽然不是很优雅，
This solution, although not very elegant,
- 使令牌表现为单个字符/项目.
- 使其只读.
- 在编辑器的上下文中是动态的，因此我们可以显示我们的标记文本.
编辑:这就是我们的结果.
这篇关于如何将 TinyMCE 编辑器中的元素视为不可编辑的单个项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
