---
title: "Emoji 扩展"
description: "在 Tiptap 中使用 Emoji 扩展，将表情符号呈现为行内节点，对于不支持的表情符号则使用备用图片。"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/nodes/emoji"
---

# Emoji 扩展

在 Tiptap 中使用 Emoji 扩展，将表情符号呈现为行内节点，对于不支持的表情符号则使用备用图片。

`Emoji` 扩展将表情符号作为行内节点呈现。所有插入的（输入、粘贴等）表情符号将转换为此节点。这样做的好处是，不支持的表情符号可以用备用图像呈现。当您从编辑器中复制文本时，它们将被转换回纯文本。

> **Interactive demo:** [Emoji](https://embed.tiptap.dev/preview/Nodes/Emoji)

## 安装

```bash
npm install @tiptap/extension-emoji
```

## 配置

### HTMLAttributes

要添加到渲染的 HTML 标签中的自定义 HTML 属性。

```js
Emoji.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})
```

### emojis

定义一组表情符号。Tiptap 提供两个表情符号列表：

1. 默认的 `emojis` 列表，包含所有 14.1 版本的 Unicode 表情符号。
2. 扩展的 `gitHubEmojis` 列表，包含自定义表情符号，例如 :octocat:

```js
import Emoji, { gitHubEmojis } from '@tiptap/extension-emoji'

Emoji.configure({
  emojis: gitHubEmojis,
})
```

> **肤色:**
>
> 肤色尚不支持 ✌🏽

### enableEmoticons

指定文本是否应转换为表情符号（例如 `<3` 转为 ❤️）。默认为 `false`。

```js
Emoji.configure({
  enableEmoticons: true,
})
```

### forceFallbackImages

指定是否应始终渲染备用图像。默认为 `false`。

```js
Emoji.configure({
  forceFallbackImages: true,
})
```

#### 添加自定义表情符号

添加您自己的自定义表情符号非常简单。

```js
import Emoji, { emojis } from '@tiptap/extension-emoji'

const customEmojis = [
  {
    // 表情符号的唯一名称，将作为属性存储
    name: 'octocat',
    // 输入规则使用的唯一短代码列表，以找到表情符号
    shortcodes: ['octocat'],
    // 帮助查找表情符号的标签列表
    tags: ['cat', 'meow'],
    // 有助于分组表情符号的名称
    group: '我的自定义表情符号组',
    // 要呈现的图像
    fallbackImage: 'https://github.githubassets.com/images/icons/emoji/octocat.png',
  },
]

Emoji.configure({
  emojis: [...emojis, ...customEmojis],
})
```

### suggestion

[阅读更多](https://tiptap.zhcndoc.com/editor/api/utilities/suggestion.md)

```js
Emoji.configure({
  suggestion: {
    // …
  },
})
```