分享一款可编辑本地电脑文件的在线编辑器

背景

之前见过在线版的VSCode,被惊讶到了。网页上竟然可以编辑电脑本地的文件,打破了网页无法编辑本地电脑文件的限制。一直好奇怎么做的。抽空研究了一下,然后发现其实也不难。

分析

先给大家介绍一下这款在线编辑器的效果。

左侧栏为文件浏览器,显示了文件列表。右侧为编辑器。此编辑器为富文本编辑器。点击左侧的文件列表,编辑器就展示了文件的内容。文件就是电脑上的文件。

总体来讲,软件清爽干净。可以直接打开文件,也可以打开文件夹。会自动获取非文本文件。保存时如果想保存纯文本文件,则使用【保存纯文本】即可。如果保留富文本格式,使用【保存】即可。如果是打开的文件,则会自动识别文件格式并自动保存,点【保存】即可。

保存时可以弹出选择保存位置。

这样也就实现了打开本地电脑文件以及文件夹,再保存文件到电脑的闭环。

使用地址:在线编辑器

这个在线编辑器发布在 https://dh.yu7s.com 网站中,集成的一款工具。里面还有好多好用的工具,简洁而强大。

那这个在线编辑器是怎么实现的呢?不是JS无法操作本地电脑的文件吗?

这个需要借助JS的File API的帮助。这个API和Windows软件编程类似,可以在打开文件选择对话框后,在用户同意后,可以拿到文件的句柄。然后就可以根据文件句柄读取文件的内容了。而文件列表,也就是使用打开文件夹对话框后,拿到文件夹的句柄,进而遍历得到文件列表。得到文件列表后,自然也就有了里面文件的句柄,就可以通过句柄来打开文件。

而保存文件,就是模拟点击下载按钮实现的。在底部有一行提示,如果要支持每次保存都弹出保存提示框,则需要在浏览器的设置里,把对应的开关打开即可。

总结

看似无法实现的编辑本地文件的在线编辑器,其实并不复杂。最新的JS是支持操作这些的,只是大家不熟悉前端的人,一直还停留在很早以前的js的知识里。


原文地址: 分享一款可编辑本地电脑文件的在线编辑器

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/39934.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

彻底解决网络哈希冲突,百度百舸的高性能网络 HPN 落地实践

GPU 的通信性能对于大模型的训练有着至关重要的影响。在 HPN 网络工程实践中,我们的核心关注点是如何充分利用网络硬件资源的能力,将通信性能最大化,从而提升大模型端到端的训练性能。 1 HPN 网络 — AIPod 下图是百度百舸的高性能网络 …

洛谷 P1020 [NOIP1999 提高组] 导弹拦截

题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统。但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度。某天,雷达捕捉到敌国的导弹来袭。由于该系统…

兴业严选|北京市户籍 多子女家庭买二套房个贷算首套

6月26日,北京市住房和城乡建设委员会、中国人民银行北京市分行、国家金融监督管理总局北京监管局、北京住房公积金管理中心联合印发《关于优化本市房地产市场平稳健康发展政策措施的通知》。 明确支持多子女家庭改善性住房需求,对北京市户籍二孩及以上的…

ode45的例程|MATLAB例程|四阶龙格库塔定步长节微分方程

ode45自己编的程序和测试代码 模型 模拟一个卫星绕大行星飞行的轨迹计算。 结果 轨迹图如下: 源代码 以下代码复制到MATLAB上即可运行,并得到上面的图像: % ode45自己编的程序和测试代码 % Evand©2024 % 2024-7-2/Ver1 clear;clc;close all; rng(0); % 参数设定…

OpenSSL EVP详解

OpenSSL EVP详解 Chapter1 OpenSSL EVP详解一、EVP基本介绍1. EVP 加密和解密2. EVP 签名和验证3. EVP 加解密文件 二、源码结构2.1 全局函数2.2 BIO扩充2.3 摘要算法EVP封装2.4 对称算法EVP封装2.5 非对称算法EVP封装2.6 基于口令的加密 三、开发实例3.1 示例13.2 示例23.3 示…

【MySQL】数据库——备份与恢复,日志管理

一、数据备份的重要性 1.备份的主要目的是灾难恢复 在生产环境中,数据的安全性至关重要 任何数据的丢失都可能产生严重的后果造成数据丢失的原因: 程序错误人为,操作错误运算错误磁盘故障灾难(如火灾、地震)和盗窃 2.数据库备份…

【5G射频基本架构】

平台框架 平台演进及搭配 5G NR频谱 NSA/SA/ENDC 在双连接中,UE在连接状态下可同时使用至少两个不同基站的无线资源。对于Sprint,ENDC将允许设备在相同的频段(41 / 2.5 GHz频段)上同时访问LTE和5G。 手机硬件实现ENDC方式—类似LT…

动态住宅代理IP的优势是什么?什么地方用到?

在大数据时代的背景下,代理IP成为了很多企业顺利开展的重要工具。代理IP地址可以分为住宅代理IP地址和数据中心代理IP地址。选择住宅代理IP的好处是可以实现真正的高匿名性,而使用数据中心代理IP可能会暴露自己使用代理的情况。 住宅代理IP是指互联网服务…

Flink 窗口触发器(Trigger)(一)

Flink 窗口触发器(Trigger)(一) Flink 窗口触发器(Trigger)(二) Flink的窗口触发器(Trigger)是流处理中一个非常关键的概念,它定义了窗口何时被触发并决定触发后的行为(如进行窗口数据的计算或清理)。 一、基本概念 …

[数据集][目标检测]人员状态跑睡抽烟打电话跌倒检测数据集4943张5类别

数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):4943 标注数量(xml文件个数):4943 标注数量(txt文件个数):4943 标注…

[Leetcode 136][Easy]-只出现一次的数字

目录 题目描述 具体思路 题目描述 原题链接 具体思路 ①首先看到数组中重复的数字,想到快慢指针,但是数组的元素是乱序的不好求。因此先对数组排序。使用了STL库的sort函数,时间复杂度O(nlogn)不符合题目要求,空间复杂度O(1)。…

RXMH2 RK223 069 AS大容量中间继电器 板前接线 约瑟JOSEF

RXMH2大容量中间继电器型号: RXMH2 RK 223 067大容量中间继电器; RXMH2 RK 223 068大容量中间继电器; RXMH2 RK 223 069大容量中间继电器; RXMH2 RK 223 070大容量中间继电器; 用途 用于电力系统二次回路及工业自…

Ubuntu22.04上Docker的安装

1. 使用APT安装 首先安装HTTPS传输的软件包和CA证书,确保软件下载过程中不被篡改。 sudo apt-get updatesudo apt-get install apt-transport-https ca-certificates curl gnupg lsb-release -y然后,使用国内源,并添加软件源的 GPG 密钥以防…

Vue2和Vue3的区别Vue3的组合式API

一、Vue2和Vue3的区别 1、创建方式的不同: (1)、vue2:是一个构造函数,通过该构造函数创建一个Vue实例 new Vue({})(2)、Vue3:是一个对象。并通过该对象的createApp()方法,创建一个vue实例。 Vue…

RAG技术下的文档智能检索

在数字化浪潮的推动下,信息检索已成为我们日常生活中不可或缺的一部分。然而,随着数据量的爆炸式增长,如何快速精准地从海量文档中检索出有价值的信息,成为了一个巨大的挑战。本文将带您走进 Pinecone 向量数据库的世界&#xff0…

AIGC到底如何改变创意设计?

在当今数字化时代,AIGC(生成式人工智能)技术的崛起对创意设计领域产生了深远的影响。AIGC不仅为设计师提供了新的工具和方法,还改变了传统的设计流程和思维方式。 传统的设计过程中,设计师需要耗费大量时间在绘图、修…

npm install puppeteer 报错 npm ERR! PUPPETEER_DOWNLOAD_HOST is deprecated解决办法

npm install puppeteer 报错如下: npm ERR! PUPPETEER_DOWNLOAD_HOST is deprecated. Use PUPPETEER_DOWNLOAD_BASE_URL instead. npm ERR! Error: ERROR: Failed to set up Chrome v126.0.6478.126! Set "PUPPETEER_SKIP_DOWNLOAD" env variable to sk…

【Linux进程】僵尸进程与孤儿进程

前言 僵尸进程和孤儿进程是Linux中极为重要的两个种进程状态, 本文将会围绕这三个问题: 是什么? 为什么? 如何产生的? 详细的介绍这两种进程; 以及一些使用场景. 僵尸进程 在了解孤儿进程之前, 需要先引入僵尸进程的概念; 什么是僵尸进程? 僵尸进程: 就是处于僵死状态的进…

类似Jira的在线项目管理软件有哪些?10 个主流的Jira替代方案

10 个 Jira 替代方案:PingCode、Worktile、Teambition、Redmine、Asana、monday.com、Zoho Projects、思码逸、Notion、Airtable。 Jira 是一款流行的项目管理工具,专为产品开发团队而设计。虽然它是一种多功能解决方案,几乎适用于任何类型的…

Git 操作补充:变基

变基 在 Git 中,整合来自不同分支的修改,除了 merge,还有一种方法,变基 rebase。git rebase 命令基本是是一个自动化的 cherry-pick 命令,它计算出一系列的提交,然后在其他地方以同样的顺序一个一个的 che…