shadcn editor

ShadCN編輯器

用法

1. 運行此命令設置電池包括編輯器。

npx shadcn@latest add https://shadcn-editor.vercel.app/r/editor-x.json

2. 使用項目中的Editor組件。

 'use client'

import { useState } from 'react'

import { SerializedEditorState } from 'lexical'

import { Editor } from '@/components/blocks/editor-x/editor'

const initialValue = {
  root : {
    children : [
      {
        children : [
          {
            detail : 0 ,
            format : 0 ,
            mode : 'normal' ,
            style : '' ,
            text : 'Hello World ' ,
            type : 'text' ,
            version : 1 ,
          } ,
        ] ,
        direction : 'ltr' ,
        format : '' ,
        indent : 0 ,
        type : 'paragraph' ,
        version : 1 ,
      } ,
    ] ,
    direction : 'ltr' ,
    format : '' ,
    indent : 0 ,
    type : 'root' ,
    version : 1 ,
  } ,
} as unknown as SerializedEditorState

export function EditorDemo ( ) {
  const [ editorState , setEditorState ] =
    useState < SerializedEditorState > ( initialValue )

  return (
    < Editor
      editorSerializedState = { editorState }
      onSerializedChange = { ( value ) => setEditorState ( value ) }
    />
  )
} 

開始歷史