mirror of https://gitee.com/godoos/godoos.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2.2 KiB
2.2 KiB
入门
所见即所得的富文本编辑器。
得益于光标及文字排版的完全自行实现。绘制底层也可由 svg 渲染,详见代码:feature/svg;或借助 pdfjs 可以完成 pdf 的绘制,详见代码:feature/pdf。
::: warning 官方仅提供编辑器核心层 npm 包,菜单栏或其他外部工具可自行参考文档扩展,或直接参考官方实现,详见demo。 :::
功能点
- 富文本操作(撤销、重做、字体、字号、加粗、斜体、下划线、删除线、上下标、对齐方式、标题、列表.....)
- 插入元素(表格、图片、链接、代码块、分页符、Math 公式、日期选择器、内容块......)
- 打印(基于 canvas 转图片、pdf 绘制)
- 控件(单选、文本、日期、单选框组、复选框组)
- 右键菜单(内部、自定义)
- 快捷键(内部、自定义)
- 拖拽(文字、元素、控件)
- 页眉、页脚、页码
- 页边距
- 分页
- 水印
- 批注
- 目录
- 插件
待开发
- 计算性能
- 控件规则
- 表格分页
- vue、react 等框架开箱即用版
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'
}
],
{}
)
- 包含正文、页眉、页脚内容
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: 配置编辑器
详见下一节