入门

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

得益于光标及文字排版的完全自行实现。绘制底层也可由 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: 准备一个容器

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: 配置编辑器

详见下一节

入门 ​

功能点 ​

待开发 ​

Step. 1: 下载 npm 包 ​

Step. 2: 准备一个容器 ​

Step. 3: 实例化编辑器 ​

Step. 4: 配置编辑器 ​

入门

功能点

待开发

Step. 1: 下载 npm 包

Step. 2: 准备一个容器

Step. 3: 实例化编辑器

Step. 4: 配置编辑器