Emoji - Plate — ContextQMD

功能特性

通过自动补全建议内联插入表情符号
通过输入:字符后跟表情名称触发（例如:apple: 🍎）
可自定义的表情数据源和渲染方式

</PackageInfo>

套件使用方式

<Steps>

安装

最快捷的添加表情功能方式是使用EmojiKit，它包含预配置的EmojiPlugin和EmojiInputPlugin以及它们的Plate UI组件。

EmojiInputElement: 渲染表情输入组合框

添加套件

tsx

import { createPlateEditor } from 'platejs/react';
import { EmojiKit } from '@/components/editor/plugins/emoji-kit';

const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    ...EmojiKit,
  ],
});

</Steps>

手动配置方式

<Steps>

安装

bash

npm install @platejs/emoji @emoji-mart/data

添加插件

tsx

import { EmojiPlugin, EmojiInputPlugin } from '@platejs/emoji/react';
import { createPlateEditor } from 'platejs/react';

const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    EmojiPlugin,
    EmojiInputPlugin,
  ],
});

配置插件

tsx

import { EmojiPlugin, EmojiInputPlugin } from '@platejs/emoji/react';
import { createPlateEditor } from 'platejs/react';
import { EmojiInputElement } from '@/components/ui/emoji-node';
import emojiMartData from '@emoji-mart/data';

const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    EmojiPlugin.configure({
      options: {
        data: emojiMartData,
        trigger: ':',
        triggerPreviousCharPattern: /^\s?$/,
        createEmojiNode: (emoji) => ({ text: emoji.skins[0].native }),
      },
    }),
    EmojiInputPlugin.withComponent(EmojiInputElement),
  ],
});

options.data: 来自@emoji-mart/data包的表情数据
options.trigger: 触发表情组合框的字符（默认：:）
options.triggerPreviousCharPattern: 匹配触发字符前一个字符的正则表达式
options.createEmojiNode: 选择表情时创建表情节点的函数。默认插入Unicode字符作为文本
withComponent: 为表情输入组合框分配UI组件

添加工具栏按钮

您可以在工具栏中添加EmojiToolbarButton来插入表情符号。

</Steps>

插件说明

EmojiPlugin

提供表情功能的核心插件。扩展自TriggerComboboxPluginOptions。

<API name="EmojiPlugin"> <APIOptions> <APIItem name="data" type="EmojiMartData" optional> 来自@emoji-mart/data包的表情数据。 - **默认值:** 内置表情库 </APIItem> <APIItem name="createEmojiNode" type="(emoji: Emoji) => Descendant" optional> 指定选择表情时插入节点的函数。 - **默认行为:** 插入包含表情Unicode字符的文本节点 </APIItem> <APIItem name="trigger" type="string" optional> 触发表情组合框的字符。 - **默认值:** `':'` </APIItem> <APIItem name="triggerPreviousCharPattern" type="RegExp" optional> 匹配触发字符前一个字符的模式。 - **默认值:** `/^\s?$/` </APIItem> <APIItem name="createComboboxInput" type="() => TElement" optional> 创建触发激活时输入元素的函数。 </APIItem> </APIOptions> </API>

EmojiInputPlugin

处理表情插入的输入行为。