回答此问题可获得+50的声望bounty。赏金宽限期已结束。Aito希望引起更多人关注此问题。
当谈到实现一个富文本编辑器时,我有点陷入了一个兔子洞,目前使用react-quill,但是想要实现模板变量的概念和/或允许用户选择模板。
我知道有TinyMCE在那里,但自托管的安装是非常不稳定的,云提供的安装是不稳定的国家,我居住。
我非常希望实现类似于以下内容的东西:https://ambassify.github.io/tinymce-variable/
这将用一个视觉上更吸引人的元素替换{{ mustache }}语法,该元素不能编辑,但可以删除。
到目前为止,我尝试使用this作为例子,在QuillJS文本编辑器中插入Embed/blots,但这并不能真正使用mustache语法插入内容,而且当用户选择整个模板时,变量也不会突出显示。
用户可以选择的模板示例:
Hey {{ receiver.fullname }},
Some message here
Thanks!
{{user.first_name}}
{{user.company.name}}
它应该是什么样子:
用户可以选择编辑他们选择的模板,点击发送后,将他们编辑的相同模板(带有变量)带到下一个电子邮件窗口。
因此,我的问题是,是否有人对如何实现这一点有建议,以及哪个所见即所得编辑器可能提供正确的解决方案(除了TinyMCE)?
2条答案
按热度按时间t30tvxxf1#
React Mentions在IMO中做得很好。你可以使用
markup
和displayTransform
属性将条目转换成一个类似标签的结构。同样,data
属性将允许你定义可用的选择。utugiqy62#
我推荐你使用tiptap框架,这是一个无头的所见即所得的框架,可以让你完全控制编辑器。
他们提供了一个简单的扩展系统,可以完全满足您的需要。