Google Drive 安裝免費寫程式軟體！協作網頁編輯器

前一週介紹過「程式碼教學利器！可協作免費漂亮線上程式碼編輯器」後，我便想繼續深入研究一下有沒有這類的線上程式碼編輯器，於是找到了今天要介紹的這個「 Editey 」免費網頁程式碼編輯器。如果要說「 Editey 」最大特色，那就是他可以在 Google Drive 上新增、編輯、同步協作 HTML、 CSS、  JavaScript 等網頁程式碼檔案。

完全免費的「 Editey 」服務有兩大用途：

• 1. 在 Google Drive 上直接開啟一個全新的網頁編輯專案，網頁需要的檔案建立在 Google Drive 中同步，並從 Google Drive 開啟編輯，利用 Google Drive 和多人線上協同合作編輯。
• 2. 編輯在 Google Drive 上已經存在的 HTML、 CSS、 JavaScript、XML、 PHP 等程式碼檔案。

下面就讓我簡單介紹「 Editey 」的基本操作方式。

1. 新增網頁程式碼檔案，直接儲存到 Google 雲端硬碟

進入「 Editey 」網站，選擇右上方的登入，用你的 Google Drive 雲端硬碟帳號登入後，就可以開始透過「 Editey 」新增網頁程式碼專案到 Google 雲端硬碟中。

你可以選擇新增空白程式碼專案，也可以選擇套用內建的一些網頁模板範本，新增後，「 Editey 」都會把網頁需要的 HTML、 CSS 等相關檔案直接儲存在你的 Google Drive 一個新的網頁資料夾做管理。

「 Editey 」本身並不會儲存你的資料，所有檔案都是儲存在你可以更自由管理的 Google Drive 上，「 Editey 」只是一個線上程式碼編輯器，這一點類似於我之前介紹過的：

• Draw.io 中文線上製作流程圖首選！專業水準完全免費
• 在Google Drive免費協作畫甘特圖！ Gantter 排程教學

2. 所見即所得的網頁程式碼預覽視窗

「 Editey 」這個線上網頁程式碼編輯器具備所見即所得的預覽視窗，左方編輯的 HTML 內容，可以在右方的預覽視窗看到結果。

而在「 Editey 」中，我們還可以新增編輯包含 HTML、 JavaScript、 CSS、 PHP、 XML 等等不同類型的網頁程式碼檔案。

3. 從 Google 雲端硬碟、你的硬碟，直接開啟編輯程式碼

回到我們的 Google 雲端硬碟，可以看到剛剛新增的網頁專案的資料夾，裡面有新增的各種程式碼檔案，這時候我可以在 Google Drive 的檔案上點擊右鍵，選擇［開啟工具］，然後利用「 Editey 」進行特定檔案的修改編輯。

更進一步的，如果 Google Drive 檔案同步到我們的硬碟中，我也可以從硬碟上用自己慣用的程式碼編輯軟體開啟這些檔案做編輯。

而所有的程式碼編輯內容，透過 Google Drive 自然可以完成同步。

4. 編輯「已經在 Google Drive 上」的其他程式碼檔案

另外，「 Editey 」也可以幫助我們透過雲端的方式，編輯已經儲存在 Google Drive 上的其他程式碼檔案，直接利用線上程式碼編輯器就能完成編輯，也經由 Google Drive 同步。

這就好像幫 Google Drive 安裝了免費程式碼編輯軟體的功能一樣。

方法是進入「 Editey 」網頁，拉到中間下面的地方，你會看到一個「 Editey Family 」的欄位，這裡包含所有支援編輯的程式碼服務，點擊特定按鈕，就能開啟特定的編輯器，去編輯我們在 Google Drive 上的程式碼。

另如我打開 XML Editey 的編輯器，就可以看起下方清單讀出我在 Google Drive 上的各個 XML 檔案，我可以在這裡利用「 Editey 」進行線上編輯，而編輯結果會同步回在 Google Drive 上的檔案。

下面我幫大家整理了這些特定程式碼編輯器的連結：

• HTML Editey 
• JavaScript Editey 
• CSS Editey 
• Page Editey 
• XML Editey 
• PHP Editey 
• TypeScript Editey 
• LESS Editey 

5. 即時多人線上協同合作！一起編輯網頁程式碼

而當「 Editey 」的程式碼檔案都同步到 Google Drive 後，我們也可以把網頁程式編輯專案透過 Google Drive 與多人進行即時的協同合作。

只要利用和 Google Drive 一樣的方式進行「檔案共用」，然後每個人都在自己的 Google Drive 連結「 Editey 」，就可以多人一起即時編輯一份程式碼檔案。

而且如下圖所示，你可以在編輯時看到其他人正在編輯哪個段落？以及對方滑鼠游標的移動軌跡。

6. 還原舊版本程式碼

「 Editey 」也利用 Google Drive 內建的檔案版本管理功能，讓我們在修改程式碼後，還可以利用 Google Drive 的「檔案版本還原」功能，隨時回復某一個時間點的程式碼。

其實，「 Editey 」還具備可以透過 Google Drive 發佈網頁的功能，但是有鑑於 Google Drive 的外連政策有所限制，我不建議大家這麼做，就把「 Editey 」當作一個好用的、多人協作的、可以透過 Google Drive 雲端同步的程式碼檔案編輯軟體即可。

最後，因為我不是專業的程式碼工程師，如果介紹上有錯誤，或是你有其他工具的補充，都歡迎留言討論。

延伸閱讀相關文章：

• 程式碼教學利器！可協作免費漂亮線上程式碼編輯器
• 拚命玩遊戲就能學寫程式！ CodeCombat 還有中文版
• 玩知名遊戲學寫程式！ Code.org 一小時學會寫小遊戲

「 Editey 」

轉貼本文時禁止修改，禁止商業使用，並且必須註明來自電腦玩物原創作者 esor huang（異塵行者），及附上原文連結：Google Drive 安裝免費寫程式軟體！協作網頁編輯器