只需一行程式碼,輕鬆實現一個線上編輯器_javascript技巧

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

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

"程式設計師Jose Jesus Perez Aguinaga 在CoderWall 分享了一個小技巧：在瀏覽器網址列中輸入一行程式碼：data:text/html, ，回車即可把瀏覽器變成臨時編輯器（需要瀏覽器支援HTML5 屬性contenteditable）。

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

複製程式碼 程式碼如下:

data:text/html,

<script><BR>var myKey="SecretKeyz";<BR>$(document).ready(function(){<BR>    var e = ace.edit("e");<BR>    var url = "http://api.openkeyval.org/" myKey;<BR>    $.ajax({<BR>      url: url,<BR>      dataType: "jsonp",<BR>      success: function( data){<BR>       e.setTheme("ace/theme/tomorrow_night_eighties");<BR>       e.getSession().setMode("ace/mode/markdown"); 🎜>      }<BR>    });<BR>     $("#e").on("keydown", function (b) {<P>      if (b.ctrlKey && 83 == b.which) {<BR>   >        var data = myKey "=" encodeURIComponent(e.getValue());<BR>        $.ajax({<🠎 url: "http://api.openkeyval.org/store/ ",<BR>          dataType: "jsonp",<BR>          success: function(data){<       }<BR>        });<BR>      }<BR>    } );<BR>});<BR></script>


將上述程式碼完整複製，貼上到Chrome 或Firefox，Safari 瀏覽器網址列（不支援低版IE 瀏覽器），回車打開，稍等片刻一個支援CTRL S 保存內容的線上編輯器呈現眼前。

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