Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 1 month 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 (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-28T13:26:39.000Z (7 months ago)
- Last Synced: 2024-05-28T21:07:36.627Z (7 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
- awesome - Hufe921/canvas-editor - rich text editor by canvas/svg (TypeScript)
- awesome-web-editor - canvas-editor - rich text editor by canvas/svg. (Rich text editor)
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
## Install
`yarn`
## Dev
`npm run dev`
## Build
#### app
`npm run build`
#### lib
`npm run lib`
