Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Hufe921/canvas-editor

Repository files navigation

canvas-editor

Version Cypress Passing GitHub Contributors License PRs

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

  1. Official plugin: canvas-editor-plugin
  2. The render layer by svg is under development, see feature/svg
  3. The export pdf feature is available now, see feature/pdf
  4. The AI-powered text processing demo, see feature/ai
  5. Table pagination #41 is under active development, see: poc/table-paging · demo

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

  1. Table paging
  2. Control rules
  3. Improve performance
  4. CRDT

Snapshot

image

Install

yarn

Dev

npm run dev

Build

app

npm run build

lib

npm run lib

AltStyle によって変換されたページ (->オリジナル) /