Online Presentation Application Based On Vue3.x + TypeScript

Online presentation application based on Vue3.x + TypeScript. Realize online editing and presentation of PPT slides.

PPTist

An online presentation application based on Vue3.x + TypeScript, which restores most of the common functions of PPT, supports the 6 most commonly used element types, text, pictures, shapes, lines, charts, and tables, and each element is highly editable Ability, while supporting rich shortcut keys and right-click menus to restore the experience of using local desktop applications as much as possible.

You can do secondary development on it to create your own online presentation application or online design tool (the secondary development document is under preparation).

Online experience address (priority update): https://www.pptist.cn/

If the network status is not good, you can visit the domestic mirror: https://pptist.gitee.io/

Github repository: https://github.com/pipipi-pikachu/PPTist

🚀 Project run

npm install

npm run serve

📜 function list

General function

history record
hot key
Right click menu
Theme settings

Slide page editing

Page add, delete
Page order adjustment
Copy and paste pages
Background settings (solid color, gradient, picture)
Gridlines

Slide element editing

Element addition, deletion
Element copy and paste
Drag and move elements
Element rotation
Element zoom
Multiple selection of elements (frame selection, click selection)
Multi-element combination
Element lock
Snap and align elements (move and zoom)
Element level adjustment
Align elements to the canvas
Align elements to other elements
Drag and drop to add graphics
Paste external picture
Element coordinates, size and rotation angle settings

Text

Rich text editing (color, highlight, font, font size, bold, italic, underline, strikethrough, corner mark, inline code, quotation, alignment, bullets, clear format)
Row height
Word spacing
Fill color
frame
shadow
transparency

image

Cropping (custom, by shape, by aspect ratio)
Filter
Flip
frame
shadow
Replace picture
Reset picture
Set as background image

shape

Fill color
frame
shadow
transparency
Flip

line

colour
width
style
End style

Charts (bar chart, line chart, pie chart)

Data editing
Background fill
Theme color
Coordinate system and coordinate text color
Other settings (bar chart to bar chart, line chart to area chart, line chart to scatter chart, pie chart to ring chart, line chart to switch smooth curve)
frame

form

Add and delete rows and columns
Set the number of rows and columns
Theme settings (theme color, header, summary row, first column, last column)
Merge Cells
Cell style (fill color, text color, bold, italic, underline, strikethrough, alignment)
frame

Slideshow

Page turning animation
Element admission animation
All slide preview
Brush tool

💡 common problem

Q. Why doesn't the xxx shortcut key work?

A. Some shortcut keys need to be focused on the designated area to take effect. For example, the focus is on the thumbnail list on the left to use the shortcut keys of the operation page, and the focus is on the canvas area to use the shortcut keys of the operation element.

Q. Why doesn't paste work?

A. Please pay attention to allow the browser to access the system clipboard.

Q. After the browser is refreshed or reopened, why is there no PPT made before?

A. The demo project is purely front-end deployment and no data will be saved.

Q. How to adjust the order of slide pages?

A. Press and hold the thumbnail on the left to drag to adjust the order.

Q. Why does the operation freeze after inserting a picture?

A. Since this demo project does not rely on the backend, the actual reference to the inserted local image is Base64, which results in a very large data volume. In a real production environment, the image address should be quoted after uploading the image. This will not happen.

Q. Why is there no effect after applying the preset theme?

A. The function of setting a preset theme is to apply the theme style to the newly added elements and pages, which will not take effect on the existing elements and pages (except font colors). You can use the "Apply Theme to All" function to change the current theme Apply to all current pages.

🔧 Project dependency

ant-design-vue - UI library

lodash -- Tool Library

prosemirror - Rich text editing frame for rich text editing of text elements

chartist - svg chart library for chart elements

tinycolor2 - Color processing tools

dexie - indexedDB wrapper, used to record historical operations

mitt - Custom event launch/monitor

animate.css - CSS animation library

vuedraggable - Drag and drop plugin based on Vue, used to adjust page order, etc.

crypto-js - Encryption function library, used to encrypt and decrypt clipboard contents

clipboard - Used to copy content to clipboard

icon-park - Icon library

Open source agreement

MIT License

Download Details:

Author: pipipi-pikachu

Demo: https://www.pptist.cn/

Source Code: https://github.com/pipipi-pikachu/PPTist

vue vuejs javascript typescript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.