@icreate/canvas-editor-plugin

canvas-editor

a rich text editor by canvas/svg

View Demo · View Docs · Report Bug · Request Feature · FAQ

Love the project? Please consider donating to help it improve!

Tips

• Official plugin: canvas-editor-plugin
• The render layer by svg is under development, see feature/svg
• The export pdf feature is available now, see feature/pdf

Basic usage

npm i @hufe921/canvas-editor --save

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

import Editor from '@hufe921/canvas-editor'

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

Features

• Rich text operations (Undo, Redo, Font, Size, Bold, Italic, Underline, Strikeout, Superscript, Alignment, Title, List, ...)
• Insert elements (Table, Image, Link, Code Block, Page Break, Math Formula, Date Picker, Block, ...)
• Print (Based on canvas to picture, pdf drawing)
• Controls (Select, Text, Date, Radio, Checkbox)
• Contextmenu (Internal, Custom)
• Shortcut keys (Internal, Custom)
• Drag and Drop(Text, Element, Control)
• Header, Footer, Page Number
• Page Margin
• Watermark
• Pagination
• Comment
• Catalog

Roadmap

• Table paging
• Control rules
• Improve performance
• CRDT

Snapshot

Install

yarn

Dev

npm run dev

Build

app

npm run build

lib

npm run lib