表情选择器
一个工具栏按钮,打开一个可搜索的表情网格,包含八个类别共 1,037 个表情。点击一个表情,或者用键盘选择,它就会以普通 Unicode 字符的形式插入到光标处。

启用
该功能由 insertemoji.js 插件提供(也包含在 plugins/all_plugins.js 中)。工具栏项为 insertemoji(工具提示为 "Insert Emoji")。它已经包含在 default、basic、full 和 mobile 工具栏中,因此在这些工具栏中只需加载插件即可。在您自己的工具栏中,请把 insertemoji 添加到所需位置:
<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/insertemoji.js"></script>
<div id="div_editor1"><p>Thanks for the update. Ship it on Friday </p></div>
<script>
var editor1 = new RichTextEditor("#div_editor1", {
toolbar: "custom",
toolbar_custom: "{bold,italic,underline}|{insertemoji}|{undo,redo}"
});
</script>
没有插件时,按钮不会有任何作用。只有当浏览器窗口宽度至少为 maxWidthForMobile(992 px)时才使用自定义工具栏;低于这个宽度时,编辑器显示 toolbarMobile,其中默认包含表情按钮。
选项
选择器没有行为开关。可以设置的是它的文字和语言:
| 选项 | 默认值 | 作用 |
|---|---|---|
text_insertemoji | "Insert Emoji" | 工具栏按钮的工具提示。 |
text_searchemojis | "Search" | 搜索框的占位符。 |
text_emoji_smileys … text_emoji_symbols、text_emoji_recent | 英文的类别名称("Smileys"、"Recently used" ……) | 类别标题和选项卡工具提示。八个类别为 smileys、people、animals、food、travel、activities、objects、symbols。 |
text_emoji_items | "{0} items" | 搜索结果上方显示的结果数量。 |
text_uilocale | 未设置(由语言包设置) | 对于 de es fr it ja ko nl pt pt-pt ru zh-Hans zh-Hant,选择器在第一次打开时会加载 lang/emoji/rte-emoji-<locale>.js,并以该语言显示和搜索表情名称。英文名称仍然可以匹配。 |
url_base | "/richtexteditor" | 加载上述表情名称文件的文件夹。 |
语言包会为您设置所有这些选项。加载了 lang/rte-lang-de.js 后,搜索框显示 "Suche",选项卡显示 "Personen"、"Tiere" 等,搜索 "rakete" 可以找到 🚀。
使用方法
- 搜索。选择器打开时,搜索框获得焦点。输入内容会按名称同时过滤所有类别("rocket" 可以找到 🚀),并显示匹配数量。
- 类别。选项卡行用于切换类别。只绘制当前打开的类别,因此面板打开得很快。
- 最近使用。最近从选择器插入的 16 个表情会以键
rte-emoji-recent保存在localStorage中。如果有最近使用的表情,选择器会在该选项卡上打开。如果存储被阻止,列表只在当前页面有效。 - 键盘。按 Tab 从搜索框进入网格。用方向键在表情之间移动(上下键会移到上一行或下一行中最近的表情),Home 和 End 跳到第一个和最后一个,Enter 或空格插入,Escape 关闭选择器。
- 通过脚本。
editor1.execCommand("insertemoji")会打开同一个选择器。斜杠菜单中把它列为 "Emoji"。
注意事项
- 表情以字符本身的形式保存,没有包装元素。选择 🚀 之后,内容为:
请以 UTF-8 存储 HTML(在数据库中,请使用能容纳四字节字符的列类型,例如 MySQL 中的<p>Thanks for the update. Ship it on Friday🚀 </p>utf8mb4)。 - 表情的外观取决于读者操作系统的字体。同一个字符在 Windows、macOS 和 Android 上可能看起来不同。
- 列表固定在插件中。没有选项可以向选择器添加或从中删除表情。
- 如果想不打开选择器、以
:shortcode:的形式输入表情,请参阅表情自动补全。