如何将输入的文字转换为表情符号

Question

我正在使用 Angular 技术开发一个社交网络应用程序。我使用 CKEditor 免费版本来实现一些核心应用程序功能，如下所示。,

1. 创建一个新的帖子组件

2. 渲染组件

我找不到将（用户输入的）符号

;) :( :)

转换为 HTML div 标签中的表情符号的方法

如果有人知道请指导我

Answer 1

如果我清楚地理解您的问题，您希望当用户在文本区域中输入符号时在网页上显示表情符号。 这可以使用像 TinyMCE 这样的内置文本编辑器插件来完成。 但如果你想尝试原生方式，这里简单的基础是： 当与 UTF-8（网页上使用的默认字符集）一起使用时，这些表情符号字符可用作 Unicode 十进制或十六进制代码点。 要获取笑脸十六进制代码点列表，请参阅： https://www.unicode.org/charts/PDF/U1F600.pdf

要在网页上显示任何特殊字符，我们使用“&#x”或“&#”。

例如，

🙂 = 🙂

😒 = 😒

😴 = 😴

因此您需要在文本区域中输入的字符串与此代码之间建立映射。 例如，

{
 ':|': "1F610"
}

然后对应于该代码点，我们可以显示笑脸。

供参考， https://codesandbox.io/s/vibrant-lehmann-ibvncy?file=/index.html

Answer 2

新的 ckeditor 表情符号插件允许您添加表情符号。它还根据关键字自动检测带过滤相关表情符号。例如

:thumbs_up 

将以下行添加到您的配置中：

config.emoji_emojiListUrl

以下链接包含演示

https://ckeditor.com/docs/ckeditor4/latest/examples/mentions.html