Electron+VUE3開發簡版的編輯器【文件預覽】

簡版編輯器的功能主要是:

  1. 打開對話框,選擇文件
  2. 后臺讀取文件文件
  3. 前端展示文件內容。

主要技術棧是VUE3、Electron和Nodejs,VUE3做頁面交互,Electron提供一個可執行Nodejs的環境以及支撐整個應用的環境,nodeJS負責讀取文件內容。

環境配置、安裝依賴這些步驟就不再敘述了。

編輯區域

編輯器的編輯區域,也就是文件預覽區域,如圖所示:

在這里插入圖片描述
引入的是開源庫:@wangeditor/editor、@wangeditor/editor-for-vue

VUE代碼如下:

<template><a-button type="primary" @click="onSelectFile">選擇文件

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/165413.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/165413.shtml
英文地址,請注明出處:http://en.pswp.cn/news/165413.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

SQL Server 百萬數據查詢優化技巧三十則

點擊上方藍字關注我 互聯網時代的進程越走越深&#xff0c;使用MySQL的人也越來越多&#xff0c;關于MySQL的數據庫優化指南很多&#xff0c;而關于SQL SERVER的T-SQL優化指南看上去比較少&#xff0c;近期有學習SQLSERVER的同學問到SQL SERVER數據庫有哪些優化建議&#xff1f…

Linux進程通信——信號(一)

原理 對于 Linux來說&#xff0c;實際信號是軟中斷&#xff0c;許多重要的程序都需要處理信號。 信號&#xff0c;為 Linux 提供了一種處理異步事件的方法。比如&#xff0c;終端用戶輸入了ctrlc來中斷程序&#xff0c;會通過信號機制停止一個程序。 概述 信號的名字和編號 …

【Docker】從零開始:8.Docker命令:Commit提交命令

【Docker】從零開始&#xff1a;8.Docker命令:Commit命令 基本概念鏡像鏡像分層什么是鏡像分層為什么 Docker 鏡像要采用這種分層結構 本章要點commit 命令命令格式docker commit 操作參數實例演示1.下載一個新的ubuntu鏡像2.運行容器3.查看并安裝vim4.退出容器5提交自己的鏡像…

【數據結構/C++】線性表_雙鏈表基本操作

#include <iostream> using namespace std; typedef int ElemType; // 3. 雙鏈表 typedef struct DNode {ElemType data;struct DNode *prior, *next; } DNode, *DLinkList; // 初始化帶頭結點 bool InitDNodeList(DLinkList &L) {L (DNode *)malloc(sizeof(DNode))…

成為AI產品經理——模型評估概述

目錄 一、模型宣講和評估的原因 二、模型宣講 三、模型評估 1. 重要特征 ① 特征來源 ②特征意義 2.選擇測試樣本 3.模型性能和穩定性 一、模型宣講和評估的原因 劉海豐老師提到他們在做一個金融AI產品未注重模型指標&#xff0c;過于注重業務指標&#xff0c;導致產生…

解決:ImportError: cannot import name ‘Adam‘ from ‘keras.optimizers‘

解決&#xff1a;ImportError: cannot import name ‘Adam‘ from ‘keras.optimizers‘ 背景 在使用之前的代碼時&#xff0c;報錯&#xff1a; from keras.optimizers import Adam ImportError: cannot import name ‘Adam’ 報錯問題 from keras.optimizers import Adam I…

2023年亞太數學建模大賽--A題(水果采摘機器人的圖像識別功能)

中國是世界上最大的蘋果生產國&#xff0c;年產量約為 3500 萬噸。同時&#xff0c;中國也是世界上最大的蘋果出口國&#xff0c;世界上每兩個蘋果中就有一個出口到國。世界上每兩個蘋果中就有一個來自中國&#xff0c;中國出口的蘋果占全球出口量的六分之一以上。來自中國。中…

Vue CLI的介紹【vue利器之一】

文章目錄 前言Vue CLI 介紹CLICLI 服務CLI 插件后言 前言 hello world歡迎來到前端的新世界 &#x1f61c;當前文章系列專欄&#xff1a;vue.js &#x1f431;?&#x1f453;博主在前端領域還有很多知識和技術需要掌握&#xff0c;正在不斷努力填補技術短板。(如果出現錯誤&am…

【Java 進階篇】Redis持久化之RDB:數據的安全守護者

Redis&#xff0c;作為一款高性能的鍵值存儲系統&#xff0c;支持多種持久化方式&#xff0c;其中RDB&#xff08;Redis DataBase&#xff09;是其最常用的一種。RDB可以將當前時刻的數據快照保存到磁盤&#xff0c;以便在Redis重啟時快速恢復數據。本文將深入探討RDB的原理、配…

飛書智能伙伴之 AI 數智參謀:先進團隊,北極星指標也要遙遙領先

11 月 22 日&#xff0c;飛書在 2023 秋季飛書未來無限大會上正式發布了飛書智能伙伴。作為首批生態伙伴&#xff0c;基于 Kyligence 智能一站式指標平臺實現的 AI 數智參謀也正式亮相。這是繼 11 月 21 日 Kyligence 產品發布會后&#xff0c;Kyligence 在數據驅動決策智能領域…

第十五屆藍橋杯(Web 應用開發)模擬賽 1 期-大學組(詳細分析解答)

目錄 1.動態的Tab欄 1.1 題目要求 1.2 題目分析 1.3 源代碼 2.地球環游 2.1 題目要求 2.2 題目分析 2.3 源代碼 3.迷惑的this 3.1 題目要求 3.2 題目分析 3.3 源代碼 4.魔法失靈了 4.1 題目要求 4.2 題目分析 4.3 源代碼 5.燃燒你的卡路里 5.1 題目要求 5.2…

第十七章:數據庫操作

數據庫基礎 SQL語言 1、select 語句 select 語句用于從數據中檢索數據。語法如下&#xff1a; SELECT 搜選字段列表 FROM 數據表名 WHERE 條件表達式 GROUP BY 字段名 HAVING 條件表達式(指定分組的條件) ORDER BY 字段名[ASC|DESC] 2、insert 語句 insert 語句用于向表中插入…

重新使用hbase前

啟動關閉Hadoop和HBase的順序一定是&#xff1a; 啟動Hadoop—>啟動HBase—>關閉HBase—>關閉Hadoop 1.掛載共享文件夾到掛載點 sudo mount -t vboxsf virtualmachineShare /mnt/shared2.進入hadoop目錄下啟動hadoop cd /usr/local/hadoop/ ./sbin/start-all.sh …

【UE5】五大基類及其使用

UObject UObject表示對象&#xff0c;準確來說&#xff0c;虛幻引擎中的對象基礎類為UObject UObject提供了以下功能&#xff1a; 垃圾收集&#xff08;Garbage collection&#xff09;引用自動更新&#xff08;Reference updating&#xff09;反射&#xff08;Reflection&am…

火電廠電氣部分設計

摘要 本文首先根據任務書上所給系統與線路及所有負荷的參數&#xff0c;分析負荷發展趨勢。從負荷增長方面闡明了建站的必要性&#xff0c;然后通過對擬建變電站的概括以及出線方向來考慮&#xff0c;并通過對負荷資料的分析&#xff0c;安全&#xff0c;經濟及可靠性方面考慮…

計算機基礎知識57

前后端數據傳輸的編碼格式(contentType) # 我們只研究post請求方式的編碼格式&#xff1a; get請求方式沒有編碼格式-- index?useranme&password get請求方式沒有請求體&#xff0c;參數直接在url地址的后面拼接著 # 有哪些方式可以提交post請求&#xff1a;f…

構建個性化預約服務:預約上門服務系統源碼解讀與實戰

隨著社會的發展&#xff0c;預約上門服務系統在滿足用戶需求、提升服務效率方面發揮著越來越重要的作用。在本文中&#xff0c;我們將深入研究預約上門服務系統的源碼&#xff0c;通過實際的技術代碼示例&#xff0c;揭示系統內部的關鍵機制&#xff0c;以及如何在實際項目中應…

qml動畫過渡Transition

文章目錄 基本概念使用 `Transition`示例動畫過渡高級用法示例:復雜動畫過渡解釋進階用法在 QML 中,Transition 元素用于定義狀態之間過渡時的動畫。這是 QML 強大的狀態機制的一部分,允許開發者創建平滑且吸引人的用戶界面交互。使用 Transition,您可以定義當元素從一個狀…

深入了解接口測試:方法、工具和關鍵考慮因素(一)

接口測試是軟件測試中的一項重要工作&#xff0c;它涉及到系統與系統之間的交互點。接口可以是外部接口&#xff0c;也可以是內部接口&#xff0c;包括上層服務與下層服務接口以及同級接口。在接口測試中&#xff0c;我們需要確保接口能夠按照預期的方式進行通信和交互&#xf…

【攻防世界-misc】can_has_stdio?

1.用記事本打開文件是這樣子的&#xff0c; 這是一段BF&#xff08;Brainfuck&#xff09;編程語言代碼&#xff0c;屬于一種極簡化的編程語言&#xff0c;用于演示計算機程序設計概念。這段代碼包含了一些操作符&#xff0c;如">"表示指針向右移動&#xff0c;&q…