โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ ๐ shadcn/directory/udecode/plate/(plugins)/(elements)/blockquote.cn โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
title: ๅผ็จๅ docs:
<blockquote> HTML ๅ
็ด ใๆทปๅ ๅผ็จๅๆไปถๆๅฟซ็ๆนๆณๆฏไฝฟ็จ BasicBlocksKit๏ผๅฎๅ
ๅซ้ข้
็ฝฎ็ BlockquotePlugin ไปฅๅๅ
ถไปๅบๆฌๅๅ
็ด ๅๅ
ถ Plate UI ็ปไปถใ
BlockquoteElement: ๆธฒๆๅผ็จๅๅ
็ด ใๅฐ kit ๆทปๅ ๅฐไฝ ็ๆไปถไธญ๏ผ
import { createPlateEditor } from 'platejs/react';
import { BasicBlocksKit } from '@/components/editor/plugins/basic-blocks-kit';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ,
...BasicBlocksKit,
],
});
</Steps>
npm install @platejs/basic-nodes
ๅจๅๅปบ็ผ่พๅจๆถ๏ผๅฐ BlockquotePlugin ๅ
ๅซๅจไฝ ็ Plate ๆไปถๆฐ็ปไธญใ
import { BlockquotePlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ,
BlockquotePlugin,
],
});
ไฝ ๅฏไปฅไฝฟ็จ็นๅฎๆธฒๆ็ปไปถๆ่ชๅฎไน้ฎ็ๅฟซๆท้ฎ็ญ้้กนๆฅ้
็ฝฎ BlockquotePluginใ
import { BlockquotePlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
import { BlockquoteElement } from '@/components/ui/blockquote-node';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ,
BlockquotePlugin.configure({
node: { component: BlockquoteElement },
shortcuts: { toggle: 'mod+shift+.' },
}),
],
});
node.component: ๅ้
BlockquoteElement ๆฅๆธฒๆๅผ็จๅๅ
็ด ใshortcuts.toggle: ๅฎไน็จไบๅๆขๅผ็จๅๆ ผๅผ็้ฎ็ๅฟซๆท้ฎใไฝ ๅฏไปฅๅฐๅผ็จๅๆทปๅ ๅฐ่ฝฌๆขไธบๅทฅๅ ทๆ ๆ้ฎไปฅๅๆขๅผ็จๅ๏ผ
{
icon: <QuoteIcon />,
label: 'ๅผ็จ',
value: KEYS.blockquote,
}
ไฝ ๅฏไปฅๅฐๅผ็จๅๆทปๅ ๅฐๆๅ ฅๅทฅๅ ทๆ ๆ้ฎไปฅๆๅ ฅๅผ็จๅ๏ผ
{
icon: <QuoteIcon />,
label: 'ๅผ็จ',
value: KEYS.blockquote,
}
</Steps>
BlockquotePlugin็จไบๅผ็จๅๅ
็ด ็ๆไปถใ้ป่ฎคๆธฒๆไธบ <blockquote> HTML ๅ
็ด ใ
tf.blockquote.toggleๅจๅฝๅๅๅๆฎต่ฝไน้ดๅๆขๅผ็จๅใๅฆๆ่ฏฅๅๅทฒ็ปๆฏๅผ็จๅ๏ผๅๆขๅคไธบๆฎต่ฝใๅฆๆๆฏๆฎต่ฝๆๅ ถไปๅ็ฑปๅ๏ผๅ่ฝฌๆขไธบๅผ็จๅใ
โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ