TUIChat
component, we support sending and receiving two types of emojis:Emoji Types | Sending Format | Text Mixed Layout | Sending Content | TUIKit comes with by default |
Small Emoji | Text Message MSG_TEXT | Yes | Emoji Image Key | Default Inclusion |
Large Sticker | Face Message MSG_FACE | No | index: emojiGroupID data: Emoji Image Key | Default Inclusion |
@custom
format identifier: TUIKit requires matching @custom
to parse the customized emoji resources.URL + Emoji Image Key
, make sure to upload your new emoji pack resources to a unified network path URL
.TUIKit source code
.TUIKit/components/TUIChat/emoji-config/custom-emoji.ts
file is the declaration file for customized emojis.import { EMOJI_TYPE } from '../../../constant';// Fill in your custom large emoji network path, example as belowexport const CUSTOM_BIG_EMOJI_URL = 'https://web.sdk.qcloud.com/im/test/emoji-test/';// Declare your custom large emoji group list, example as belowexport const CUSTOM_BIG_EMOJI_GROUP_LIST: IEmojiGroupList = [{emojiGroupID: 4, // Emoji Group IDtype: EMOJI_TYPE.CUSTOM, // Emoji Group Type: CUSTOM Custom Emoji Groupurl: CUSTOM_BIG_EMOJI_URL, // Emoji Group Public URL Prefix// Declaration of the emoji list, formatted as Key + Emoji File Type Suffix, every Key in the list must be uniquelist: ['@custom_cat32.png', '@custom_cat33.png', '@custom_cat34.png', '@custom_cat35.png', '@custom_cat36.png', '@custom_cat37.png', '@custom_cat38.png', '@custom_cat39.png','@custom_cat40.png', '@custom_cat45.png', '@custom_cat46.png', '@custom_cat47.png', '@custom_cat49.png', '@custom_cat50.png', '@custom_cat51.png'],},];
baseURL + Emoji Image Key
, please make sure to upload your new emoji pack resources to a unified network path baseURL
.@custom
to parse custom emoji resources, each custom small emoji resource key must include the @custom
format identifier.TUIKit/components/TUIChat/emoji-config/custom-emoji.ts
// Fill in your custom small emoji network path, example as below// export const CUSTOM_BASIC_EMOJI_URL = 'https://web.sdk.qcloud.com/im/assets/emoji/';export const CUSTOM_BASIC_EMOJI_URL = '';// Configure CUSTOM_BASIC_EMOJI_URL_MAPPING:// CUSTOM_BASIC_EMOJI_URL_MAPPING records the mapping relationship between each emojiKey and its corresponding emoji image URL, including the file suffix in the URL// Each emojiKey must contain the@custom identifier to be parsed, example as below
export const CUSTOM_BASIC_EMOJI_URL_MAPPING = {'[@custom_Expect]': 'emoji_0@2x.png','[@custom_Blink]': 'emoji_1@2x.png','[@custom_Guffaw]': 'emoji_2@2x.png','[@custom_KindSmile]': 'emoji_3@2x.png',...}
TUIKit/components/TUIChat/emoji-config/locales/en.ts
// Rewriting English Entry key-value Assertion, example as belowconst Emoji = {'[@custom_Expect]': '[Expect]','[@custom_Blink]': '[Blink]','[@custom_Guffaw]': '[Guffaw]',...}
TUIKit/components/TUIChat/emoji-config/locales/zh_cn.ts
// Rewriting Chinese Entry key-value Assertion, example as belowconst Emoji = {'[@custom_Expect]': '[Expect]','[@custom_Blink]': '[Blink]','[@custom_Guffaw]': '[Guffaw]',...}
emojiGroupID = 0 | emojiGroupID = 1 | emojiGroupID = 2 | emojiGroupID = 3 |
| | | |
TUIKit/components/TUIChat/emoji-config/default-emoji.ts
:// For example, to delete the large emoji group with emojiGroupID = 1export const BIG_EMOJI_GROUP_LIST: IEmojiGroupList = [// {// emojiGroupID: 1,// type: EMOJI_TYPE.BIG,// url: DEFAULT_BIG_EMOJI_URL,// list: ['yz00', 'yz01', 'yz02', 'yz03', 'yz04', 'yz05', 'yz06', 'yz07', 'yz08',// 'yz09', 'yz10', 'yz11', 'yz12', 'yz13', 'yz14', 'yz15', 'yz16', 'yz17'],// },...];
Was this page helpful?