标题组件

PreviousNext

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

标题组件
Loading...

功能特性

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

套件使用

安装

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

  • 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

  • query REQUIRED { allow: string[] }

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

  • focusEndPath optional Path

    标题末尾的聚焦路径

    • 默认值: null

  • focusStartPath optional Path

    标题起始的聚焦路径

    • 默认值: null

  • visibleId optional string

    当前可见标题的ID

    • 默认值: null

类型

TCaptionElement

继承自TElement。

Attributes

Collapse all

  • caption optional Descendant[]

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

组件

<Caption>

Props

Collapse all

  • options optional object

    标题组件的配置选项

  • state optional object

    标题组件的状态

    • Optionsobject

    Collapse all

    • readOnly optional boolean

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

<CaptionTextarea>

Props

Collapse all

  • state object

    标题文本区域的状态

Block SelectionCaption