canvas-editor_fex765/docs/guide/start.md

入门

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

得益于光标及文字排版的完全自行实现。绘制底层也可由svg渲染，详见代码：feature/svg；或借助pdfjs的完成pdf的绘制，详见代码：feature/pdf。

::: warning 官方仅提供编辑器核心层npm包，菜单栏或其他外部工具可自行参考文档扩展，或直接参考官方实现，详见demo。 :::

功能点

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

待开发

• 渲染性能
• 控件规则
• 表格分页
• 可编辑页眉页脚

Step. 1: 下载npm包

npm i @hufe921/canvas-editor --save

Step. 2: 准备一个容器

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

Step. 3: 实例化编辑器

import Editor from "@hufe921/canvas-editor"

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

Step. 4: 配置编辑器

详见下一节