canvas editor

Leinwand

Ein reicher Texteditor von Canvas/SVG

Demo anzeigen · Dokumente anzeigen · Fehler melden · Feature anfordern · FAQ

Lieben Sie das Projekt? Bitte überlegen Sie, ob Sie sich verbessern können!

Tipps

1. Offizielles Plugin: Leinwand-Eduitor-Plugin
2. Die Renderschicht von SVG befindet sich in der Entwicklung, siehe Feature/SVG
3. Die Export -PDF -Funktion ist ab sofort verfügbar. Siehe Feature/PDF

Grundnutzung

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'
    }
  ]
} ) 

Merkmale

• Reiche Textvorgänge (Rückgänger, Redo, Schriftart, Größe, mutig, kursiv, unterstreich, Strikeout, Superscript, Ausrichtung, Titel, Liste, ...)
• Elemente einfügen (Tabelle, Bild, Link, Codeblock, Seitenunterbrechung, Mathematikformel, Datumspicker, Block, ...)
• Druck (basierend auf Leinwand bis Bild, PDF -Zeichnung)
• Steuerelemente (auswählen, Text, Datum, Radio, Kontrollkästchen)
• Kontextmenu (intern, benutzerdefiniert)
• Verknüpfungsschlüssel (intern, benutzerdefiniert)
• Drag & Drop (Text, Element, Steuerung)
• Header, Fußzeile, Seitennummer
• Seitenrand
• Wasserzeichen
• Pagination
• Kommentar
• Katalog

Roadmap

1. Tischpaging
2. Kontrollregeln
3. Leistung verbessern
4. CRDT

Schnappschuss

Installieren

yarn

Dev

npm run dev

Bauen

App

npm run build

lib

npm run lib