# 自定义布局
默认情况下，LinwitDocEditor 在初始化的时候，会创建编辑器的头部菜单、编辑区域以及底部的字数显示区域。
如下图所示：
## 默认示例
以上截图的初始化代码如下：
```html
LinwitDocEditor Demo
```
## 自定义布局
在某些场景下，我们想自定义整个 UI 布局，比如：类腾讯文档风格（演示地址： http://doc.aieditor.com.cn ），又或者其他自定义布局形式。
我们可以通过 LinwitDocEditor 自定义的 UI 来实现。
示例代码如下：
```html 20-24
LinwitDocEditor Demo
```
在以上的代码中，相比默认代码，多出了一个类名为 `aie-container` 的 `div` 及其 `3` 个子 `div`，子 `div` 的作用如下：
- `aie-container-header` 用于填充头部的菜单内容
- `aie-container-main` 用于填充中间编辑区域
- `aie-container-footer` 用于填充底部内容
这 `3` 个子 `div` 的顺序、位置、结构、包裹深度等可以进行任何的改变以及布局。但是他们都必须被包裹在类名 `aie-container` 的 `div` 中。
这样，我们就可以实现了自己想要的任何布局。