标题组件

PreviousNext

为图片、视频、文件等媒体元素添加标题说明。

标题组件
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>
  );
}
Media embedding and management.
media-demo
media-demo

功能特性

  • 为图片、视频、音频文件等媒体元素添加标题说明
  • 通过方向键在区块内选择标题
  • 使用文本区域组件进行内联标题编辑

套件使用

安装

最快捷的方式是使用MediaKit套件，它包含预配置的CaptionPlugin以及媒体插件和它们的Plate UI组件。

'use client';

import { CaptionPlugin } from '@platejs/caption/react';
import {
  AudioPlugin,
  FilePlugin,
  ImagePlugin,
  MediaEmbedPlugin,
  PlaceholderPlugin,
  VideoPlugin,
} from '@platejs/media/react';
import { KEYS } from 'platejs';

import { AudioElement } from '@/components/ui/media-audio-node';
import { MediaEmbedElement } from '@/components/ui/media-embed-node';
import { FileElement } from '@/components/ui/media-file-node';
import { ImageElement } from '@/components/ui/media-image-node';
import { PlaceholderElement } from '@/components/ui/media-placeholder-node';
import { MediaPreviewDialog } from '@/components/ui/media-preview-dialog';
import { MediaUploadToast } from '@/components/ui/media-upload-toast';
import { VideoElement } from '@/components/ui/media-video-node';

export const MediaKit = [
  ImagePlugin.configure({
    options: { disableUploadInsert: true },
    render: { afterEditable: MediaPreviewDialog, node: ImageElement },
  }),
  MediaEmbedPlugin.withComponent(MediaEmbedElement),
  VideoPlugin.withComponent(VideoElement),
  AudioPlugin.withComponent(AudioElement),
  FilePlugin.withComponent(FileElement),
  PlaceholderPlugin.configure({
    options: { disableEmptyPlaceholder: true },
    render: { afterEditable: MediaUploadToast, node: PlaceholderElement },
  }),
  CaptionPlugin.configure({
    options: {
      query: {
        allow: [KEYS.img, KEYS.video, KEYS.audio, KEYS.file, KEYS.mediaEmbed],
      },
    },
  }),
];
  • Caption: 为媒体元素渲染标题组件

添加套件

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

手动配置

安装

pnpm add @platejs/caption

添加插件

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

配置插件

配置哪些媒体插件应支持标题功能：

import { KEYS } from 'platejs';
import { CaptionPlugin } from '@platejs/caption/react';
import {
  AudioPlugin,
  FilePlugin,
  ImagePlugin,
  MediaEmbedPlugin,
  VideoPlugin,
} from '@platejs/media/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    ImagePlugin,
    VideoPlugin,
    AudioPlugin,
    FilePlugin,
    MediaEmbedPlugin,
    CaptionPlugin.configure({
      options: {
        query: {
          allow: [KEYS.img, KEYS.video, KEYS.audio, KEYS.file, KEYS.mediaEmbed],
        },
      },
    }),
  ],
});
  • query.allow: 支持标题功能的插件键名数组

插件

CaptionPlugin

为媒体元素添加标题功能的插件。

Options

Collapse all

    配置哪些插件支持标题功能

    标题末尾的聚焦路径

    • 默认值: null

    标题起始的聚焦路径

    • 默认值: null

    当前可见标题的ID

    • 默认值: null

类型

TCaptionElement

继承自TElement。

Attributes

Collapse all

    标题值，由子节点数组构成

组件

<Caption>

Props

Collapse all

    标题组件的配置选项

    标题组件的状态

    Optionsobject

    Collapse all

      标题组件是否处于只读模式

<CaptionTextarea>

Props

Collapse all

    标题文本区域的状态

Block SelectionCaption