HUA

hi, 大家好, 我是徐小夕, 最近在研究基于 web 的文档编辑器,在网上调研了很多方案, 刚好看到了一款非常有意思的开源编辑器——canvas-editor, 它底层基于 canvas 实现, 我们使用它可以实现类似于 word文档编辑器类似的效果, 同时还支持很多灵活可配置的 API, 可以帮助我们定制属于自己的文档编辑平台, 如果你刚好也想着手实现, 这个项目将非常适合你.

同时, 作者是国内大佬, 欢迎点赞支持.

好了, 话不多说, 接下来我们看看它具体的使用和实现效果.

github地址: https://github.com/Hufe921/canvas-editor

效果展示

我先展示一下我本地使用 canvas-editor 开发的编辑器效果:

插入表格:

插入公式:

是不是很像在 word 里编写文档的感觉~

功能点介绍

canvas-editor 功能点介绍如下:

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

安装 & 使用

  1. 安装依赖
 1pnpm i @hufe921/canvas-editor --save

2. 基本使用案例

 1
 2<div class="canvas-editor"></div>
 3
 4
 5import Editor from '@hufe921/canvas-editor'
 6
 7new Editor(
 8  document.querySelector('.canvas-editor'),
 9  {
10    header: [
11      {
12        value: 'Header',
13        rowFlex: RowFlex.CENTER
14      }
15    ],
16    main: [
17      {
18        value: 'H5-Dooring零代码'
19      }
20    ],
21    footer: [
22      {
23        value: 'H5-Dooring',
24        size: 12
25      }
26    ]
27  },
28  {}
29)

当然为了使用更全面的功能, 我们还可以根据提供的配置来进行更自由的配置, 如下:

 1interface IEditorOption {
 2  mode?: EditorMode 
 3  defaultType?: string 
 4  defaultColor?: string 
 5  defaultFont?: string 
 6  defaultSize?: number 
 7  width?: number 
 8  height?: number 
 9  scale?: number 
10  defaultHyperlinkColor?: string 
11  header?: IHeader 
12  footer?: IFooter 
13  pageNumber?: IPageNumber 
14  paperDirection?: PaperDirection 
15  inactiveAlpha?: number 
16  historyMaxRecordCount?: number 
17  contextMenuDisableKeys?: string[] 
18  scrollContainerSelector?: string 
19  wordBreak?: WordBreak 
20  watermark?: IWatermark 
21  control?: IControlOption 
22  background?: IBackgroundOption 
23  
24}

当然还有很多有意思的api, 大家也可以参考它的文档:

最终附上一个完整的demo效果:

如果你觉得 这款开源项目 很有趣，请不吝点赞、收藏、以及关注，你的支持对作者来说意义重大。

同时如果你有好的项目, 也可以在《趣谈前端》回复“自荐”, 获取项目自荐流程, 让自己的开源项目让 5****w+ 程序员看到~

更多推荐:

可视化表单&试卷搭建平台技术详解

个人笔记记录 2021 ~ 2025