Emoji

PreviousNext
组合框Emoji输入元素Emoji工具栏按钮
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}
Emoji insertion via toolbar or colon-triggered combobox.
emoji-demo
emoji-demo

功能特性

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

套件使用方式

安装

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

'use client';

import emojiMartData from '@emoji-mart/data';
import { EmojiInputPlugin, EmojiPlugin } from '@platejs/emoji/react';

import { EmojiInputElement } from '@/components/ui/emoji-node';

export const EmojiKit = [
  EmojiPlugin.configure({
    options: { data: emojiMartData as any },
  }),
  EmojiInputPlugin.withComponent(EmojiInputElement),
];

添加套件

import { createPlateEditor } from 'platejs/react';
import { EmojiKit } from '@/components/editor/plugins/emoji-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    ...EmojiKit,
  ],
});

手动配置方式

安装

pnpm add @platejs/emoji @emoji-mart/data

添加插件

import { EmojiPlugin, EmojiInputPlugin } from '@platejs/emoji/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    EmojiPlugin,
    EmojiInputPlugin,
  ],
});

配置插件

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来插入表情符号。

插件说明

EmojiPlugin

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

Options

Collapse all

    来自@emoji-mart/data包的表情数据。

    • 默认值: 内置表情库

    指定选择表情时插入节点的函数。

    • 默认行为: 插入包含表情Unicode字符的文本节点

    触发表情组合框的字符。

    • 默认值: ':'

    匹配触发字符前一个字符的模式。

    • 默认值: /^\s?$/

    创建触发激活时输入元素的函数。

EmojiInputPlugin

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

ComboboxEmoji