# 入门

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

得益于光标及文字排版的完全自行实现。绘制底层也可由 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 绘制)
- 控件(单选、文本、日期、单选框组、复选框组)
- 右键菜单(内部、自定义)
- 快捷键(内部、自定义)
- 拖拽(文字、元素、控件)
- 页眉、页脚、页码
- 页边距
- 分页
- 水印
- 批注
- 目录
- [插件](https://github.com/Hufe921/canvas-editor-plugin)

## 待开发

- 计算性能
- 控件规则
- 表格分页
- 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: 配置编辑器

详见下一节