← 全部文档

表情选择器

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

在工具栏按钮下方打开了表情选择器的编辑器:一个搜索框、一排类别选项卡,以及以网格形式显示的 Smileys 类别表情
在 Smileys 选项卡上打开的选择器。第一个选项卡(时钟图标)是 "Recently used"(最近使用):在此浏览器中从选择器插入过表情之后,它才会出现。

启用

该功能由 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"。

注意事项

  • 表情以字符本身的形式保存,没有包装元素。选择 🚀 之后,内容为:
    <p>Thanks for the update. Ship it on Friday🚀 </p>
    请以 UTF-8 存储 HTML(在数据库中,请使用能容纳四字节字符的列类型,例如 MySQL 中的 utf8mb4)。
  • 表情的外观取决于读者操作系统的字体。同一个字符在 Windows、macOS 和 Android 上可能看起来不同。
  • 列表固定在插件中。没有选项可以向选择器添加或从中删除表情。
  • 如果想不打开选择器、以 :shortcode: 的形式输入表情,请参阅表情自动补全。

相关内容:工具栏项参考、移动端工具栏、特殊字符演示。