๐Ÿ“ Sign Up | ๐Ÿ” Log In

โ† Root | โ†‘ Up

โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ ๐Ÿ“„ shadcn/directory/udecode/plate/(plugins)/(elements)/blockquote.cn โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

โ•”โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•—
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘

title: ๅผ•็”จๅ— docs:

  • route: /docs/components/blockquote-node title: ๅผ•็”จๅ—ๅ…ƒ็ด 

<ComponentPreview name="basic-blocks-demo" /> <PackageInfo>

ๅŠŸ่ƒฝ็‰น็‚น

  • ๅˆ›ๅปบๅผ•็”จๅ—ไปฅๅผบ่ฐƒ้‡่ฆไฟกๆฏๆˆ–็ชๅ‡บๆ˜พ็คบๆฅ่‡ชๅค–้ƒจๆฅๆบ็š„ๅผ•็”จใ€‚
  • ้ป˜่ฎคๆธฒๆŸ“ไธบ <blockquote> HTML ๅ…ƒ็ด ใ€‚
</PackageInfo>

Kit ไฝฟ็”จ

<Steps>

ๅฎ‰่ฃ…

ๆทปๅŠ ๅผ•็”จๅ—ๆ’ไปถๆœ€ๅฟซ็š„ๆ–นๆณ•ๆ˜ฏไฝฟ็”จ BasicBlocksKit๏ผŒๅฎƒๅŒ…ๅซ้ข„้…็ฝฎ็š„ BlockquotePlugin ไปฅๅŠๅ…ถไป–ๅŸบๆœฌๅ—ๅ…ƒ็ด ๅŠๅ…ถ Plate UI ็ป„ไปถใ€‚

<ComponentSource name="basic-blocks-kit" />

ๆทปๅŠ  Kit

ๅฐ† kit ๆทปๅŠ ๅˆฐไฝ ็š„ๆ’ไปถไธญ๏ผš

import { createPlateEditor } from 'platejs/react';
import { BasicBlocksKit } from '@/components/editor/plugins/basic-blocks-kit';

const editor = createPlateEditor({
  plugins: [
    // ...ๅ…ถไป–ๆ’ไปถ,
    ...BasicBlocksKit,
  ],
});
</Steps>

ๆ‰‹ๅŠจไฝฟ็”จ

<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

ๅœจๅฝ“ๅ‰ๅ—ๅ’Œๆฎต่ฝไน‹้—ดๅˆ‡ๆขๅผ•็”จๅ—ใ€‚ๅฆ‚ๆžœ่ฏฅๅ—ๅทฒ็ปๆ˜ฏๅผ•็”จๅ—๏ผŒๅˆ™ๆขๅคไธบๆฎต่ฝใ€‚ๅฆ‚ๆžœๆ˜ฏๆฎต่ฝๆˆ–ๅ…ถไป–ๅ—็ฑปๅž‹๏ผŒๅˆ™่ฝฌๆขไธบๅผ•็”จๅ—ใ€‚

โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•

โ† Root | โ†‘ Up