跳转至

表情

注意事项

1、Web SDK 接收消息后,消息体内的原生 Emoji 字符会被解码为对应 Unicode 码,需调用转化方法才能正确显示

2、不同浏览器, 不同设备, 展示的原生 Emoji 表情都不同

Code Apple Google FB Win10 Win7 GMail
U+1F600 avatar avatar avatar avatar avatar avatar

3、如需多端展示 Emoji 一致, 需使用 emojiToHTML 转化为 HTML 后再展示(此方法为以图片形式展示)

4、emojiToHTML 和 symbolToHTML 仅支持默认的 128 个 emoji. 展示更多, 需自行扩展

兼容

  1. 兼容表情库 2.2.6 及以下版本
  2. 默认支持 128 个 Emoji 表情并且支持自定义扩展 Emoji
  3. 兼容浏览器:
(1) IE7+、Edge、Chrome 30+、Firefox 30+、Safari 10+ 等主流桌面版浏览器
(2) Android 4.4+ 系统的 Chrome 浏览器以及微信浏览器
(3) iPhone 操作系统 iOS 8.0+ 的 Safari 浏览器以及微信浏览器

引用

<!-- HTTP -->
<script src="http://cdn.ronghub.com/RongEmoji-2.2.7.js"></script>
<!-- HTTPS -->
<script src="https://cdn.ronghub.com/RongEmoji-2.2.7.js"></script>
<!-- 压缩版 -->
<script src="https://cdn.ronghub.com/RongEmoji-2.2.7.min.js"></script>

初始化

使用默认参数初始化

RongIMLib.RongIMEmoji.init();

通过配置初始化

config 参数说明:

参数 类型 必填 说明 最低版本
size Number 表情大小, 默认 24, 建议 18 - 58 2.2.6
url String emoji 背景图片 url 2.2.6
lang String emoji 对应名称语言, 默认 zh 2.2.6
extension Object 扩展表情 2.2.6
// 表情信息可参考 http://unicode.org/emoji/charts/full-emoji-list.html
var config = {
  size: 25,
  url: '//f2e.cn.ronghub.com/sdk/emoji-48.png',
  lang: 'en',
  extension: {
    dataSource: {
      u1F914: { // 自定义 u1F914 对应的表情
        en: 'thinking face', // 英文名称
        zh: '思考', // 中文名称
        tag: '🤔', // 原生 Emoji
        position: '0 0' // 所在背景图位置坐标
      }
    },
    url: '//cdn.ronghub.com/thinking-face.png' // 新增 Emoji 背景图 url
  }
};
RongIMLib.RongIMEmoji.init(config);

获取列表

var list = RongIMLib.RongIMEmoji.list;
/*
list => [
    {
        unicode: 'u1F600',
        emoji: '😀',
        node: span,
        symbol: '[笑嘻嘻]'
    },
    ...
]
*/

Emoji 转文字

在不支持原生 Emoji 渲染时,可显示对应名称,适用于消息输入

var message = '😀😁测试 Emoji';
// 将 message 中的原生 Emoji 转化为对应名称
RongIMLib.RongIMEmoji.emojiToSymbol(message);
// => '[笑嘻嘻][露齿而笑]测试 Emoji'

文字转 Emoji

发送消息时,消息体里必须使用原生 Emoji 字符

var message = '[笑嘻嘻][露齿而笑]测试 Emoji';
// 将 message 中的 Emoji 对应名称转化为原生 Emoji
RongIMLib.RongIMEmoji.symbolToEmoji(message);
// => '😀😁测试 Emoji'

Emoji 转 HTML

Web SDK 接收消息后,消息体内的原生 Emoji 字符会被解码为对应 Unicode 码,需调用转化方法才能正确显示

var message = '\uf600测试 Emoji';
// 将 message 中的原生 Emoji (包含 Unicode ) 转化为 HTML
RongIMLib.RongIMEmoji.emojiToHTML(message);
// => "<span class='rong-emoji-content' name='[笑嘻嘻]'>😀</span>测试 Emoji"

文字 转 HTML

var message = '[露齿而笑]测试 Emoji';
// 将 message 中的 Emoji 对应名称转化为 HTML
RongIMLib.RongIMEmoji.symbolToHTML(message);
// => "<span class='rong-emoji-content' name='[露齿而笑]'>😁</span>测试 Emoji"