僅一行程式碼，打造一個線上編輯器

36kr發表於2013-01-31
行程

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

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

"程式設計師 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 儲存內容的線上編輯器呈現眼前。

　　僅一行程式碼，實現功能相當於系統的記事本程式，感慨技術宅的藝術造詣吧？～

相關文章