---
title: "添加一个表情符号下拉菜单"
description: "添加一个下拉菜单，将表情符号插入到 Tiptap 编辑器中。更多请查看文档！"
canonical_url: "https://tiptap.zhcndoc.com/ui-components/components/emoji-dropdown-menu"
---

# 添加一个表情符号下拉菜单

添加一个下拉菜单，将表情符号插入到 Tiptap 编辑器中。更多请查看文档！

一个面向 Tiptap 编辑器的完全可访问的表情符号下拉菜单。通过输入 `:` 触发字符，提供智能的表情符号建议，支持键盘导航，实现无缝插入表情符号。

> **Interactive demo:** [emoji dropdown menu](https://template.tiptap.dev/preview/tiptap-ui/emoji-dropdown-menu)

## 安装

通过 Tiptap CLI 添加该组件：

```bash
npx @tiptap/cli@latest add emoji-dropdown-menu
```

## 组件

### `<EmojiDropdownMenu />`

一个预构建的 React 组件，通过输入 `:` 触发提供表情符号建议。

#### 使用示例

```tsx
import * as React from 'react'
import { EditorContent, EditorContext, useEditor } from '@tiptap/react'

// --- Tiptap 核心扩展 ---
import { StarterKit } from '@tiptap/starter-kit'
import { Emoji, gitHubEmojis } from '@tiptap/extension-emoji'

// --- Tiptap UI ---
import { EmojiDropdownMenu } from '@/components/tiptap-ui/emoji-dropdown-menu'

// --- Tiptap 节点 ---
import '@/components/tiptap-node/code-block-node/code-block-node.scss'
import '@/components/tiptap-node/paragraph-node/paragraph-node.scss'

export const EmojiDropdownMenuExample = () => {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [
      StarterKit,
      Emoji.configure({
        emojis: gitHubEmojis,
        forceFallbackImages: true,
      }),
    ],
    content: `
        <p>尝试输入 <code>:</code> 来打开表情符号下拉菜单。</p>
        `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <EmojiDropdownMenu char=":" />
      <EditorContent editor={editor} />
    </EditorContext.Provider>
  )
}
```

#### 属性

`EmojiDropdownMenu` 继承了所有来自 [SuggestionMenuProps](https://tiptap.zhcndoc.com/ui-components/utils-components/suggestion-menu.md#props) 的属性。