Courseware-editor NPM

🎨 Courseware-Editor

A web-based presentation (slideshow) application built with Vue3.x and TypeScript, that replicates most of the common features of Microsoft Office PowerPoint, allowing for the editing and presentation of PPTs online. It offers a rich set of shortcuts and right-click context menus, aiming to recreate a desktop-like application experience. Additionally, it supports exporting to local PPTX files. If you’re looking to develop a “Web Slideshow Application,” PPTist is a great place to start.

🚀 Installation

npm install

npm run dev

📚 Features

Basic Features

History (undo, redo)
Shortcuts
Right-click menu
Export local files (PPTX, JSON, images, PDF)
Import and export pptist files
Print

Slide Page Editing

Add/delete pages
Copy/paste pages
Adjust page order
Background settings (solid color, gradient, image)
Set canvas size
Gridlines
Rulers
Canvas zoom and move
Theme settings
Extract slides style
Speaker notes (rich text)
Slide templates
Transition animations
Element animations (entrance, exit, emphasis)
Selection panel (hide elements, layer sorting, element naming)
Find/replace
Annotations

Slide Element Editing

Add/delete elements
Copy/paste elements
Drag and move elements
Rotate elements
Scale elements
Multiple element selection (marquee, point selection)
Group multiple elements
Batch edit multiple elements
Lock elements
Magnetic alignment of elements (move and scale)
Adjust element layer
Align elements to canvas
Align elements to other elements
Evenly distribute multiple elements
Drag to add text and images
Paste external images
Set element coordinates, size, and rotation
Element hyperlinks (link to webpage, link to other slide pages)

Text

Rich text editing (color, highlight, font, font size, bold, italic, underline, strikethrough, subscript, inline code, quote, hyperlink, alignment, numbering, bullet points, paragraph indent, clear formatting)
Line height
Character spacing
Paragraph spacing
First line indent
Fill color
Border
Shadow
Transparency
Vertical text

Images

Crop (custom, shape, aspect ratio)
Filters
Tint (mask)
Flip
Border
Shadow
Replace image
Reset image
Set as background

Shapes

Draw any polygon
Draw any line (unclosed shape simulation)
Replace shape
Fill color
Border
Shadow
Transparency
Flip
Shape format painter
Edit text (supports rich text, similar to text element’s rich text editing)

Lines

Color
Width
Style
Endpoint style

Charts (bar, column, line, area, scatter, pie, donut)

Chart conversion
Data editing
Background fill
Theme color
Coordinate system and axis text color
Other chart settings
Border
Legend

Tables

Add/delete rows and columns
Theme settings (theme color, header, total row, first column, last column)
Merge cells
Cell styles (fill color, text color, bold, italic, underline, strikethrough, alignment)
Border

Video

Preview cover settings
Auto play

Audio

Icon color
Auto play
Loop play

Formulas

LaTeX editing
Color settings
Formula line thickness settings

Slide Show

Preview all slides
Pen and blackboard tools
Timer tool
Laser pointer
Auto play
Speaker view

Mobile

Basic editing
- Add/delete/copy/note/undo redo pages
- Insert text, images, rectangles, circles
- General element operations: move, scale, rotate, copy, delete, layer adjust, align
- Element styles: text (bold, italic, underline, strikethrough, font size, color, alignment), fill color
Basic preview
Play preview

👀 FAQ

Some common problems: FAQ

🎯 Supplement

There is currently no complete development documentation, but the following documents may be of some help to you:

🧮 Commercial

If you wish to use this project for commercial gain, I hope you will respect open source and strictly adhere to the AGPL-3.0 license, giving back to the open source community.