48 lines
1.0 KiB
Plaintext
48 lines
1.0 KiB
Plaintext
|
---
|
||
|
|
title: 创建编辑器
|
||
|
|
description: 渲染根节点、内容区域、工具栏和完整的默认 Action 集合。
|
||
|
|
order: 10
|
||
|
|
toc:
|
||
|
|
- id: styles
|
||
|
|
title: 样式
|
||
|
|
- id: editor-structure
|
||
|
|
title: 编辑器结构
|
||
|
|
- id: presets
|
||
|
|
title: 预设
|
||
|
|
---
|
||
|
|
|
||
|
|
## 样式 {#styles}
|
||
|
|
|
||
|
|
在应用中导入一次编辑器样式：
|
||
|
|
|
||
|
|
```ts
|
||
|
|
import "@workspace/lexical/globals.css"
|
||
|
|
```
|
||
|
|
|
||
|
|
## 编辑器结构 {#editor-structure}
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import {
|
||
|
|
LexicalActions,
|
||
|
|
LexicalBubbleToolbar,
|
||
|
|
LexicalContent,
|
||
|
|
LexicalFixedToolbar,
|
||
|
|
LexicalFooter,
|
||
|
|
LexicalRoot,
|
||
|
|
} from "@workspace/lexical"
|
||
|
|
|
||
|
|
;<LexicalRoot value="" onChange={setHtml}>
|
||
|
|
<LexicalActions useDefaults="full" />
|
||
|
|
<LexicalFixedToolbar />
|
||
|
|
<LexicalContent placeholder="开始输入…" />
|
||
|
|
<LexicalBubbleToolbar />
|
||
|
|
<LexicalFooter />
|
||
|
|
</LexicalRoot>
|
||
|
|
```
|
||
|
|
|
||
|
|
当某个区域没有 Actions 或自定义子元素时，对应工具栏和 Footer 不会渲染 DOM。
|
||
|
|
|
||
|
|
## 预设 {#presets}
|
||
|
|
|
||
|
|
基础文本编辑选择 `minimal`，完整内置功能选择 `full`。预设模式有意不接受手动 Action 子元素。
|