https://github.com/hufe921/canvas-editor

rich text editor by canvas/svg
https://github.com/hufe921/canvas-editor

browser canvas canvas-editor control date-picker editor emr latex pdf pdf-generation rich-text svg typescript vite wysiwyg

Last synced: 11 days ago
JSON representation

rich text editor by canvas/svg

• Host: GitHub
• URL: https://github.com/hufe921/canvas-editor
• Owner: Hufe921
• License: mit
• Created: 2021-11-12T14:18:16.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-05-28T13:26:39.000Z (5 months ago)
• Last Synced: 2024-05-28T21:07:36.627Z (5 months ago)
• Topics: browser, canvas, canvas-editor, control, date-picker, editor, emr, latex, pdf, pdf-generation, rich-text, svg, typescript, vite, wysiwyg
• Language: TypeScript
• Homepage: https://hufe.club/canvas-editor
• Size: 40.8 MB
• Stars: 3,059
• Watchers: 55
• Forks: 443
• Open Issues: 42
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
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

1. Official plugin: [canvas-editor-plugin](https://github.com/Hufe921/canvas-editor-plugin)

2. The render layer by svg is under development, see [feature/svg](https://github.com/Hufe921/canvas-editor/tree/feature/svg)

3. The export pdf feature is available now, see [feature/pdf](https://github.com/Hufe921/canvas-editor/tree/feature/pdf)

## Basic usage

```bash

npm i @hufe921/canvas-editor --save

```

```html



```


```javascript

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](https://github.com/Hufe921/canvas-editor/tree/feature/CRDT)

## Snapshot

![image](https://github.com/Hufe921/canvas-editor/blob/main/src/assets/snapshots/main_v0.9.35.png)

## Install

`yarn`

## Dev

`npm run dev`

## Build

#### app

`npm run build`

#### lib

`npm run lib`