僅一行代碼,打造一個在線編輯器 - OSCHINA - 中文開源技術交流社區

2020-12-25 開源中國

在大部分人眼裡,技術宅給人的印象是沉默寡言,總摸不透他心裡想些什麼,彼此都保持距離。作為半個程式設計師,我覺得真正的技術宅大部分時間都在找樂子,鼓搗各種想法,和大部分人的極客心理是一樣的,程式設計師也還愛講笑話,也喜歡燒菜做飯,雖然大多是為了減減壓,這樣看來和常人沒什麼不一樣。

不一樣的地方,技術宅崇尚極致,喜歡極簡,又希望簡約不簡單,背後就是技術宅滿心思的不斷的嘗試,我正在看著一齣好戲在上演:

" 程式設計師 Jose Jesus Perez Aguinaga 在 CoderWall 分享了一個小技巧:在瀏覽器地址欄中輸入一行代碼:data:text/html, <html contenteditable> ,回車即可把瀏覽器變臨時編輯器(需要瀏覽器支持 HTML5 屬性 contenteditable)。不少程式設計師受 Jose 的啟發,開始對這行代碼加工改造,比如改成支持 Ruby 語法高亮的編輯器……"

從引子中可以看到,本來只是簡短的小段代碼: data:text/html, <html contenteditable>,經過程式設計師們不斷改造,從一個簡單的可編輯頁面,逐步變成了包括支持 Java、Ruby、Python 等多種 程式語言高亮的代碼編輯器,截至不到 1 個小時的最後更新,我已經看到了一個和notepad.cc 網站功能相近,使用了第三方網站資料庫 API 服務存儲內容的 在線編輯器 了:

 

data:text/html,<style type="text/css">#e { position:absolute; top:0; right:0; bottom:0; left:0; font-size:16px;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js"></script><script src="http://code.jquery.com/jquery-1.9.0.min.js"></script><script>var myKey="SecretKeyz";$(document).ready(function(){ var e = ace.edit("e"); var url = "http://api.openkeyval.org/"+myKey; $.ajax({ url: url, dataType: "jsonp", success: function(data){ e.setTheme("ace/theme/tomorrow_night_eighties"); e.getSession().setMode("ace/mode/markdown"); e.setValue(data); } }); $("#e").on("keydown", function (b) { if (b.ctrlKey && 83 == b.which) { b.preventDefault(); var data = myKey+"="+encodeURIComponent(e.getValue()); $.ajax({ data: data, url: "http://api.openkeyval.org/store/", dataType: "jsonp", success: function(data){ alert("Saved."); } }); } });});</script>

 

將以上代碼完整複製,粘貼到 Chrome 或者 Firefox,Safari 瀏覽器地址欄中(不支持低版本 IE 瀏覽器),回車打開,稍等片刻一個支持 CTRL + S 保存內容的在線編輯器呈現眼前。

僅一行代碼,實現功能相當於系統的記事本程序,感慨技術宅的藝術造詣吧?~

 

相關焦點

  • Google限制Python使用引熱議 - OSCHINA - 中文開源技術交流社區
    Google論壇中網友公開詢問Collin Winter(Collin Winter是Python社區一位頗具影響力的開發者,他曾是CPython項目的核心開發者之一、也曾是Unladen Swallow(見文末注釋)的核心開發者,參與了很多Python項目的開發。)。
  • FineUI(開源版)v4.2.0 發布了! - OSCHINA - 中文開源技術交流社區
    原始碼已經託管到OSC:http://git.oschina.net/sanshi/FineUI FineUI
  • 盤點微軟最應該開源的 15 款產品 - OSCHINA - 中文開源技術交流社區
    他們先是向Linux內核貢獻代碼,還開放了.NET核心、Visual Studio Code編輯器、甚至是Chakra JavaScript引擎(IE瀏覽器和Edge所用)的原始碼,而在和公司內部的開發者進行了漫長的談判之後,微軟最近又對博客工具Windows Live Writer進行了開源。可實際上,作為一家軟體巨頭,微軟還有不少產品都應該進行開源。
  • Git 2.4.3 發布 - OSCHINA - 中文開源技術交流社區
    此外還包括常規修復,文檔更新和代碼清理。此版本現已提供下載:https://github.com/git/git/archive/v2.4.3.zip。Git是一個開源的分布式版本控制系統,用以有效、高速的處理從很小到非常大的項目版本管理。
  • 開源春天,此時不來,更待何時? - OSCHINA - 中文開源技術交流社區
    隨後 Apache 軟體基金會與 OpenStack 基金會相繼出來澄清,表示「開源軟體、開原始碼協作、參與公開電話會議或私人會議以及提供贊助資金都是不受 EAR 約束的活動,因此不應對社區產生影響」。
  • Delta Lake 進入 Linux 基金會 - OSCHINA - 中文開源技術交流社區
    Delta Lake 是一個存儲層,為 Apache Spark 和大數據 workloads 提供 ACID 事務能力,其通過寫和快照隔離之間的樂觀並發控制(optimistic concurrency control),在寫入數據期間提供一致性的讀取,從而為構建在 HDFS 和雲存儲上的數據湖帶來可靠性。
  • 開放源碼是開源軟體嗎? - OSCHINA - 中文開源技術交流社區
    所以,與此類似的,在中文裡,我們可以認為:「開放原始碼」是一個動詞+一個名詞。而「開源」則是一個特定的詞彙。作為動詞,我們說將某某軟體開源,是一種行為。作為形容詞,我們稱某某軟體是一個開源(的)軟體,不僅僅是指我們能夠獲取到他的原始碼。
  • Hutool 2.16.0 發布,Java 工具集 - OSCHINA - 中文開源技術交流社區
    Hutool 是一個Java工具包,提供了豐富的文件、日期、日誌、正則、字符串、配置文件等工具方法,並封裝了一套簡單易用的ORM框架。 優化ClassPath路徑轉為絕對路徑Direction增加方法從字符串轉換(大小寫不敏感)添加DigestUtil方法,用於md* sha1等摘要算法,同時簡化SecureUtil,其中md* sha1方法調用DigestUtil增加Editor接口,用於規範對象編輯器
  • AWTK 1.2 發布,國產開源 GUI 引擎 - OSCHINA - 中文開源技術交流...
    旨在為用戶提供一個功能強大、高效可靠、簡單易用、可輕鬆做出炫酷效果的GUI引擎,並支持跨平臺同步開發,一次編程,終生使用。AWTK當前升級到了v1.2版本,相對於v1.1,我們完善了許多細節,增加了部分特性、控制項以及API等,讓AWTK支持更多的功能和更炫酷的效果。
  • JavaFX 2012:徹底開源 - OSCHINA - 中文開源技術交流社區
    其中將JavaFX完全開源赫列榜首——在2011年的JavaOne大會上,Oracle已做出保證將開源整個JavaFX平臺。 以下是Richard Bair列出的2012年JavaFX 10大目標: 1.
  • Sublime Text 使用體驗 - OSCHINA - 中文開源技術交流社區
    如果一種編輯器只能運行在一種平臺上,我是絕對不會考慮它的,跨平臺是必要條件。Sublime Text不僅跨平臺,而且在所有平臺上看起來都很漂亮。很流暢,響應靈敏,很吸引眼球。Sublime Text的一個獨特的功能是支持多光標操作:它能讓你對文本中的多個地方同時做修改,你可以看到多個地方在你輸入的時候同時發生變化。
  • Gitbook,這個開源出書平臺了不起 - OSCHINA - 中文開源技術交流社區
    GitHub充分利用了網際網路的能力,讓開發者可以方便地參與不同的項目,不要說查閱別人的代碼,修改別人的項目,是一種更高層次的交流、對話。就好像《如何閱讀一本書》裡提到的「主動閱讀」,是通過不斷了解作者核心觀念,並提出自己觀點進行碰撞的方式,讓讀者成為一名偉大的讀者。相比紙質書中作者與讀者的對話,GitHub 將兩段代碼撰寫者的溝通顯性化,不再是偷偷在旁邊的注釋裡加入自己的觀點。
  • 納德拉時代下的微軟開源之路 - OSCHINA - 中文開源技術交流社區
    不過進入納德拉時代之後,微軟的態度來了一個180度大轉彎,儘管那句「Microsoft Love Linux」聽起來有些曖昧,但是微軟確實是深深愛上了開源。此前Linux基金會公布非營利組織R Consortium之後,微軟也成為了該組織的一名成員。但是現在,微軟又在開源領域有了新的動向。
  • 關於編程裡的那些 ABCDEFG - OSCHINA - 中文開源技術交流社區
    它是一款開源 JavaScript 函式庫,由 Google 和它的社區來維護,用來協助單一頁面應用程式運行的。它的目標是透過 MVC模式(Model-View-Controller)功能增強基於瀏覽器的應用,使開發和測試變得更容易。函式庫讀取包含附加自定義(標籤屬性)的 HTML,遵從這些自定義屬性中的指令,並將頁面中的輸入或輸出與由 JavaScript 變量表示的模型綁定起來。
  • 開源軟體蓄勢待發 - OSCHINA - 中文開源技術交流社區
    相關內容11家值得關注的開源技術公司優異的技術特性和相對低廉的價格的結合使得開源產品廠商比以往有了更多進入企業網絡的路徑。Likewise公司執行長 Barry Crist 稱:「在網絡泡沫時期,由於Linux比SPARC上的Solaris更為便宜,開源產品逐漸由Unix轉移到了Linux。
  • 華為莊表偉:三代開源社區的協作模式 - OSCHINA - 中文開源技術...
    隨著Web技術的不斷成熟,開源社區也開始創造一個又一個的Web開源項目,其中Web化的項目管理工具,如雨後春筍般冒了出來。在wikipedia上,issue-tracking systems列出了55個,project management software列出了152個,其中開源的也有30+,open-source software hosting列出了22個,堪稱蔚為壯觀。
  • Netflix 的開源文化與技術 - OSCHINA - 中文開源技術交流社區
    在之前的新聞《Netflix企業文化與架構設計》一文中我們介紹了Netflix高擴展的企業文化與架構,而作為一家在線影片租賃提供商
  • SugarCRM:開源與商業的完美結合 - OSCHINA - 中文開源技術交流社區
    他認為,在中國市場以商業為後盾的開源模式將會成為CRM軟體發展的一個趨勢。 2009年4月22日,SugarCRM在上海舉辦了精英聯合峰會,並同時宣布中國區總經理的上任。我們可以看出這是一個信號,是關於SugarCRM商業開源策略正式在中國實施的前奏。
  • 排名前十的開源安全項目 - OSCHINA - 中文開源技術交流社區
    搜尋安全相關的開源軟體最好的地方顯然是 GitHub。你可以使用該網站上的搜索功能來找到這些有用的工具,但是有一個地方可以讓你找到那些安全方面最流行的項目,那就是 GitHub 的展示區,可能知道它的人不多。
  • 程式設計師常用的15個學習交流網站
    自創建以來,博客園一直致力並專注於為開發者打造一個純淨的技術交流社區,推動並幫助開發者通過網際網路分享知識,從而讓更多開發者從中受益。博客園的使命是幫助開發者用代碼改變世界。除了git代碼倉庫託管及基本的 Web管理界面以外,還提供了訂閱、討論組、文本渲染、在線文件編輯器、協作圖譜(報表)、代碼片段分享(Gist)等功能。目前,其註冊用戶已經超過3100萬(2018年數據),託管版本數量也是非常之多,這裡面很國內外技術大牛,也有很多開源項目代碼以及框架。其中不乏知名開源項目Ruby on Rails、jQuery、python等。