docs/(plugins)/(functionality)/caption.cn.mdx
最快捷的方式是使用MediaKit套件，它包含预配置的CaptionPlugin以及媒体插件和它们的Plate UI组件。
Caption: 为媒体元素渲染标题组件import { createPlateEditor } from 'platejs/react';
import { MediaKit } from '@/components/editor/plugins/media-kit';
const editor = createPlateEditor({
plugins: [
// ...其他插件
...MediaKit,
],
});
npm install @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为媒体元素添加标题功能的插件。
<API name="CaptionPlugin"> <APIOptions> <APIItem name="query" type="{ allow: string[] }" required> 配置哪些插件支持标题功能 <APISubList> <APISubListItem parent="query" name="allow" type="string[]"> 可添加标题的区块插件键名 </APISubListItem> </APISubList> </APIItem> <APIItem name="focusEndPath" type="Path" optional> 标题末尾的聚焦路径 - **默认值:** `null` </APIItem> <APIItem name="focusStartPath" type="Path" optional> 标题起始的聚焦路径 - **默认值:** `null` </APIItem> <APIItem name="visibleId" type="string" optional> 当前可见标题的ID - **默认值:** `null` </APIItem> </APIOptions> </API>TCaptionElement继承自TElement。
<Caption><CaptionTextarea>