โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ ๐ shadcn/directory/udecode/plate/(plugins)/(elements)/heading.cn โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
title: ๆ ้ข docs:
<h1> ๅฐ <h6>๏ผใๆทปๅ ๆ ้ขๆไปถๆๅฟซ็ๆนๆณๆฏไฝฟ็จ BasicBlocksKit๏ผๅฎๅ
ๅซ้ข้
็ฝฎ็ H1PluginใH2Plugin ๅ H3Plugin ไปฅๅๅ
ถไปๅบๆฌๅๅ
็ด ๅๅ
ถ Plate UI ็ปไปถใ
ๅฐ kit ๆทปๅ ๅฐไฝ ็ๆไปถไธญ๏ผ
import { createPlateEditor } from 'platejs/react';
import { BasicBlocksKit } from '@/components/editor/plugins/basic-blocks-kit';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ,
...BasicBlocksKit,
],
});
npm install @platejs/basic-nodes
ๅฝไฝ ้่ฆๆดๅคๆงๅถๆๆณ่ฆๅ ๅซ็นๅฎๆ ้ข็บงๅซๆถ๏ผๆทปๅ ๅ็ฌ็ๆ ้ขๆไปถใ
import { createPlateEditor } from 'platejs/react';
import { H1Plugin, H2Plugin, H3Plugin } from '@platejs/basic-nodes/react';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ,
H1Plugin,
H2Plugin,
H3Plugin,
// ๆ นๆฎ้่ฆๆทปๅ H4PluginใH5PluginใH6Plugin
],
});
ไฝฟ็จ่ชๅฎไน็ปไปถๆๅฟซๆท้ฎ้ ็ฝฎๅ็ฌ็ๆ ้ขๆไปถใ
import { createPlateEditor } from 'platejs/react';
import { H1Plugin, H2Plugin, H3Plugin } from '@platejs/basic-nodes/react';
import { H1Element, H2Element, H3Element } from '@/components/ui/heading-node';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ,
H1Plugin.configure({
node: { component: H1Element },
shortcuts: { toggle: { keys: 'mod+alt+1' } },
}),
H2Plugin.configure({
node: { component: H2Element },
shortcuts: { toggle: { keys: 'mod+alt+2' } },
}),
H3Plugin.configure({
node: { component: H3Element },
shortcuts: { toggle: { keys: 'mod+alt+3' } },
}),
// ็ฑปไผผๅฐ้
็ฝฎ H4PluginใH5PluginใH6Plugin
],
});
node.component: ๅ้
่ชๅฎไน React ็ปไปถๅฆ H1Element ๆฅๆธฒๆ็นๅฎ็บงๅซ็ๆ ้ขใshortcuts.toggle: ๅฎไน้ฎ็ๅฟซๆท้ฎ๏ผไพๅฆ mod+alt+1๏ผๆฅๅๆข็ธๅบ็ๆ ้ข็บงๅซใไฝ ๅฏไปฅๅฐ่ฟไบ้กน็ฎๆทปๅ ๅฐ่ฝฌๆขไธบๅทฅๅ ทๆ ๆ้ฎไปฅๅฐๅ่ฝฌๆขไธบๆ ้ข๏ผ
{
icon: <Heading1Icon />,
label: 'ๆ ้ข 1',
value: 'h1',
}
{
icon: <Heading2Icon />,
label: 'ๆ ้ข 2',
value: 'h2',
}
{
icon: <Heading3Icon />,
label: 'ๆ ้ข 3',
value: 'h3',
}
ไฝ ๅฏไปฅๅฐ่ฟไบ้กน็ฎๆทปๅ ๅฐๆๅ ฅๅทฅๅ ทๆ ๆ้ฎไปฅๆๅ ฅๆ ้ขๅ ็ด ๏ผ
{
icon: <Heading1Icon />,
label: 'ๆ ้ข 1',
value: 'h1',
}
{
icon: <Heading2Icon />,
label: 'ๆ ้ข 2',
value: 'h2',
}
{
icon: <Heading3Icon />,
label: 'ๆ ้ข 3',
value: 'h3',
}
H1Plugin็จไบ H1 ๆ ้ขๅ ็ด ็ๆไปถใ
H2Plugin็จไบ H2 ๆ ้ขๅ ็ด ็ๆไปถใ
H3Plugin็จไบ H3 ๆ ้ขๅ ็ด ็ๆไปถใ
H4Plugin็จไบ H4 ๆ ้ขๅ ็ด ็ๆไปถใ
H5Plugin็จไบ H5 ๆ ้ขๅ ็ด ็ๆไปถใ
H6Plugin็จไบ H6 ๆ ้ขๅ ็ด ็ๆไปถใ
tf.h1.toggleๅๆขๆ้ๅ็ฑปๅไธบๆ ้ขใ
โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ