Emoji 扩展

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

安装

npm install @tiptap/extension-emoji

依赖

为了正确放置弹出窗口，我们在所有示例中使用 tippy.js。您可以自由选择自己的库，但如果您愿意，只需安装我们使用的：

npm install tippy.js

配置

HTMLAttributes

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

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

emojis

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

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

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

Emoji.configure({
  emojis: gitHubEmojis,
})

肤色

肤色尚不支持 ✌🏽

enableEmoticons

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

Emoji.configure({
  enableEmoticons: true,
})

forceFallbackImages

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

Emoji.configure({
  forceFallbackImages: true,
})

添加自定义表情符号

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

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

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