---
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 子元素。