Online Presentation Application Based On Vue3.x + TypeScript

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.

Manage Vue i18n with Typescript

Internationalize your Vue project thanks to vue-i18n along with Typescript

How to use Vue 3 with TypeScript to build powerful apps

Vue 3 with TypeScript .A demo project outlining how to use Vue 3 with TypeScript to build powerful apps.

How to use TypeScript to Create Vue Apps with Vue Class Components

In this article, we’ll look at how to create Vue.js apps with class-based components. Learn how to use TypeScript to create Vue Apps with Vue Class Components

How to use TypeScript and Vue with Vue.extend

TypeScript and Vue are a great combination, but how do you use it? In this video I'll discuss how to use TypeScript and Vue with Vue.extend and look at the class component architecture. A Beginners Guide to Vue.js With TypeScript