โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ ๐ shadcn/directory/udecode/plate/(plugins)/(functionality)/caption.cn โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
title: ๆ ้ข็ปไปถ description: ไธบๅพ็ใ่ง้ขใๆไปถ็ญๅชไฝๅ ็ด ๆทปๅ ๆ ้ข่ฏดๆใ docs:
ๆๅฟซๆท็ๆนๅผๆฏไฝฟ็จ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>โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ