# 入门 > 所见即所得的富文本编辑器。 得益于光标及文字排版的完全自行实现。绘制底层也可由 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
``` ## 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: 配置编辑器 详见下一节