背景
之前見過線上版的VSCode，被驚訝到了。網頁上竟然可以編輯電腦本地的檔案，打破了網頁無法編輯本地電腦檔案的限制。一直好奇怎麼做的。抽空研究了一下，然後發現其實也不難。
分析
先給大家介紹一下這款線上編輯器的效果。
左側欄為檔案瀏覽器，顯示了檔案列表。右側為編輯器。此編輯器為富文字編輯器。點選左側的檔案列表，編輯器就展示了檔案的內容。檔案就是電腦上的檔案。
總體來講，軟體清爽乾淨。可以直接開啟檔案，也可以開啟資料夾。會自動獲取非文字檔案。儲存時如果想儲存純文字檔案，則使用【儲存純文字】即可。如果保留富文字格式，使用【儲存】即可。如果是開啟的檔案，則會自動識別檔案格式並自動儲存，點【儲存】即可。
儲存時可以彈出選擇儲存位置。
這樣也就實現了開啟本地電腦檔案以及資料夾，再儲存檔案到電腦的閉環。
使用地址：線上編輯器
這個線上編輯器釋出在 https://dh.yu7s.com 網站中，整合的一款工具。裡面還有好多好用的工具，簡潔而強大。
那這個線上編輯器是怎麼實現的呢？不是JS無法操作本地電腦的檔案嗎？
這個需要藉助JS的File API的幫助。這個API和Windows軟體程式設計類似，可以在開啟檔案選擇對話方塊後，在使用者同意後，可以拿到檔案的控制代碼。然後就可以根據檔案控制代碼讀取檔案的內容了。而檔案列表，也就是使用開啟資料夾對話方塊後，拿到資料夾的控制代碼，進而遍歷得到檔案列表。得到檔案列表後，自然也就有了裡面檔案的控制代碼，就可以透過控制代碼來開啟檔案。
而儲存檔案，就是模擬點選下載按鈕實現的。在底部有一行提示，如果要支援每次儲存都彈出儲存提示框，則需要在瀏覽器的設定裡，把對應的開關開啟即可。
總結
看似無法實現的編輯本地檔案的線上編輯器，其實並不複雜。最新的JS是支援操作這些的，只是大家不熟悉前端的人，一直還停留在很早以前的js的知識裡。
原文地址: http://www.yu7s.com/article/20240703163304875.html