Maofeng
48 lines
1.1 KiB
Plaintext
48 lines
1.1 KiB
Plaintext
---
|
|
title: Create the editor
|
|
description: Render the root, content surface, toolbars, and a complete default action set.
|
|
order: 10
|
|
toc:
|
|
- id: styles
|
|
title: Styles
|
|
- id: editor-structure
|
|
title: Editor structure
|
|
- id: presets
|
|
title: Presets
|
|
---
|
|
|
|
## Styles {#styles}
|
|
|
|
Import the editor stylesheet once in the application:
|
|
|
|
```ts
|
|
import "@workspace/lexical/globals.css"
|
|
```
|
|
|
|
## Editor structure {#editor-structure}
|
|
|
|
```tsx
|
|
import {
|
|
LexicalActions,
|
|
LexicalBubbleToolbar,
|
|
LexicalContent,
|
|
LexicalFixedToolbar,
|
|
LexicalFooter,
|
|
LexicalRoot,
|
|
} from "@workspace/lexical"
|
|
|
|
;<LexicalRoot value="" onChange={setHtml}>
|
|
<LexicalActions useDefaults="full" />
|
|
<LexicalFixedToolbar />
|
|
<LexicalContent placeholder="Start writing…" />
|
|
<LexicalBubbleToolbar />
|
|
<LexicalFooter />
|
|
</LexicalRoot>
|
|
```
|
|
|
|
Toolbars and the footer render no DOM when their region has no actions and no custom children.
|
|
|
|
## Presets {#presets}
|
|
|
|
Choose `minimal` for basic text editing or `full` for the complete built-in feature set. Preset mode intentionally does not accept manual action children.
|