簡版編輯器的功能主要是:
- 打開對話框,選擇文件
- 后臺讀取文件文件
- 前端展示文件內容。
主要技術棧是VUE3、Electron和Nodejs,VUE3做頁面交互,Electron提供一個可執行Nodejs的環境以及支撐整個應用的環境,nodeJS負責讀取文件內容。
環境配置、安裝依賴這些步驟就不再敘述了。
編輯區域
編輯器的編輯區域,也就是文件預覽區域,如圖所示:
引入的是開源庫:@wangeditor/editor、@wangeditor/editor-for-vue
VUE代碼如下:
<template><a-button type="primary" @click="onSelectFile">選擇文件