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

背景

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

分析

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

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

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

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

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

使用地址:在线编辑器

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

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

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

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

总结

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


原文地址: http://www.yu7s.com/article/20240703163304875.html

相关推荐
Robust2813 天前
鸿蒙中富文本编辑与展示
华为·harmonyos·富文本编辑器·鸿蒙开发
ZhaoYulin65 个月前
react-draft-wysiwyg富文本编辑器使用常见问题解答
前端·javascript·react.js·富文本编辑器·react-draft
我码玄黄5 个月前
Meta的开源力作:Lexical框架,富文本的未来
开源·前端开发·富文本·富文本编辑器
Kagol6 个月前
重回铁王座!时隔5年!Quill 2.0 终于发布啦🎉
前端·富文本编辑器
码蚁先生8 个月前
React富文本编辑器开发(一)
前端·javascript·react.js·前端框架·react·富文本编辑器
Java斌9 个月前
十分钟学会用springboot制作微信小程序富文本编辑器
java·spring boot·微信小程序·富文本编辑器
凌云(mlinyun)10 个月前
【富文本编辑器实战】02 编写编辑器配置文件
javascript·vue.js·前端框架·富文本编辑器
征途黯然.1 年前
【富文本编辑器】原生JS使用WangEditor和vue上传图片前后端demo
前端·javascript·vue.js·wangeditor·富文本编辑器
SunnyRun!1 年前
vue3富文本编辑器的二次封装开发-Tinymce
vue3·tinymce·富文本编辑器