# 入门

> 所见即所得的富文本编辑器。

得益于光标及文字排版的完全自行实现。绘制底层也可由svg渲染，详见代码：[feature/svg](https://github.com/Hufe921/canvas-editor/tree/feature/svg)；或借助pdfjs的完成pdf的绘制，详见代码：[feature/pdf](https://github.com/Hufe921/canvas-editor/tree/feature/pdf)。

::: warning
官方仅提供编辑器核心层npm包，菜单栏或其他外部工具可自行参考文档扩展，或直接参考[官方](https://github.com/Hufe921/canvas-editor)实现，详见[demo](https://hufe.club/canvas-editor/)。
:::

## 功能点

- 富文本操作（撤销、重做、字体、字号、加粗、斜体、上下标、对齐方式.....）
- 插入元素（表格、图片、链接、代码块、分页符、Math公式、日期选择器、内容块......）
- 打印（基于canvas转图片、pdf绘制）
- 控件（单选、文本、复选框）
- 右键菜单（内部、自定义）
- 快捷键（内部、自定义）
- 文字、元素、控件拖拽
- 页眉、页脚、页码
- 页边距
- 水印
- 分页

## 待开发

- 调整行首标点符号
- 计算性能
- 控件规则
- 表格分页
- vue、react等框架开箱即用版

## Step. 1: 下载npm包

```sh
npm i @hufe921/canvas-editor --save
```

## Step. 2: 准备一个容器

```html
<div class="canvas-editor"></div>
```

## Step. 3: 实例化编辑器

- 仅包含正文内容
```javascript
import Editor from "@hufe921/canvas-editor"

new Editor(document.querySelector(".canvas-editor"), [
    {
      value: "Hello World"
    }
  ], {})
```

- 包含正文、页眉、页脚内容
```javascript
import Editor from "@hufe921/canvas-editor"

new Editor(document.querySelector(".canvas-editor"), {
  header: [{
    value: "Header",
    rowFlex: RowFlex.CENTER
  }],
  main: [{
    value: "Hello World"
  }],
  footer: [{
    value: 'canvas-editor',
    size: 12
  }]
}, {})
```

## Step. 4: 配置编辑器

详见下一节