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 」只是一個線上程式碼編輯器,這一點類似於我之前介紹過的:





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 上的檔案。

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




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 雲端同步的程式碼檔案編輯軟體即可。

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

延伸閱讀相關文章:
Editey

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

留言

  1. 比較可惜的是:做好的PHP檔案無法放在Google Drive就可以變成網站。
    Dropbox可以放置網站,但也不支援PHP執行碼。如果哪天Google Drive
    可以支援PHP、JQuery甚至Perl CGI的話,Google Drive就會很熱門了。

    回覆刪除
    回覆
    1. 可以執行後端程式有太多安全上的考量

      刪除
    2. 很多人不知道免費版google drive是有流量上限的,真要架php如果只是玩票性質還好,拿來工作或是做生意要是哪天流量爆了不能運作那不是說笑的

      刪除
    3. 而且,現在google drive已經很熱門嘛...

      刪除
    4. 是的,所以我文章最後一段也有提醒大家,建議不要拿來直接發佈架站,用來修改或編輯程式碼則是可行的

      刪除
    5. 真要架後端可以用google cloud platform或app engine

      刪除
  2. 如果要雲端開發程式的話,Cloud9也不錯,是很好的IDE

    回覆刪除
  3. 本人想開網上商店但不識寫網址請幫助謝謝。

    回覆刪除
  4. 請問還有一個StackEdit, 我查過還沒有比較或使用過,我有試用StackEdit一下,但又看到這篇文章,就有些心動...

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

微軟 Bing AI 繪圖工具 Image Creator 免費開放,30秒輕鬆生成圖片

Google Maps 我的地圖完全教學!規劃自助旅行攻略

3個 ChatGPT 輸入到輸出實驗,第二大腦筆記用 AI 生成文章報告

Arc 瀏覽器 windows 版測試心得,用四大介面改造升級專注工作流

Google 表單的 10 個專業問卷調查設計秘密教學

如何為筆記命名,建立搜尋規則?我的標題、分類、標籤命名法

Draw.io 中文線上製作流程圖首選!專業水準完全免費

如何用 ChatGPT 加速生成一份有圖有文的簡報,實戰案例教學

Google 表單自動關閉回覆教學:時間人數到達就過期