背景

之前見過在線版的VSCode，被驚訝到了。網頁上竟然可以編輯電腦本地的文件，打破了網頁無法編輯本地電腦文件的限制。一直好奇怎么做的。抽空研究了一下，然后發現其實也不難。

分析

先給大家介紹一下這款在線編輯器的效果。

左側欄為文件瀏覽器，顯示了文件列表。右側為編輯器。此編輯器為富文本編輯器。點擊左側的文件列表，編輯器就展示了文件的內容。文件就是電腦上的文件。

總體來講，軟件清爽干凈。可以直接打開文件，也可以打開文件夾。會自動獲取非文本文件。保存時如果想保存純文本文件，則使用【保存純文本】即可。如果保留富文本格式，使用【保存】即可。如果是打開的文件，則會自動識別文件格式并自動保存，點【保存】即可。

保存時可以彈出選擇保存位置。

這樣也就實現了打開本地電腦文件以及文件夾，再保存文件到電腦的閉環。

使用地址：在線編輯器

這個在線編輯器發布在?https://dh.yu7s.com?網站中，集成的一款工具。里面還有好多好用的工具，簡潔而強大。

那這個在線編輯器是怎么實現的呢？不是JS無法操作本地電腦的文件嗎？

這個需要借助JS的File API的幫助。這個API和Windows軟件編程類似，可以在打開文件選擇對話框后，在用戶同意后，可以拿到文件的句柄。然后就可以根據文件句柄讀取文件的內容了。而文件列表，也就是使用打開文件夾對話框后，拿到文件夾的句柄，進而遍歷得到文件列表。得到文件列表后，自然也就有了里面文件的句柄，就可以通過句柄來打開文件。

而保存文件，就是模擬點擊下載按鈕實現的。在底部有一行提示，如果要支持每次保存都彈出保存提示框，則需要在瀏覽器的設置里，把對應的開關打開即可。

總結

看似無法實現的編輯本地文件的在線編輯器，其實并不復雜。最新的JS是支持操作這些的，只是大家不熟悉前端的人，一直還停留在很早以前的js的知識里。

---

原文地址:?分享一款可編輯本地電腦文件的在線編輯器