只需一行代碼,輕松實(shí)現(xiàn)一個(gè)在線編輯器

2019-11-20 21:43:54

字體：大中小

供稿：網(wǎng)友

在大部分人眼里，技術(shù)宅給人的印象是沉默寡言，總摸不透他心里想些什么，彼此都保持距離。作為半個(gè)程序員，我覺(jué)得真正的技術(shù)宅大部分時(shí)間都在找樂(lè)子，鼓搗各種想法，和大部分人的極客心理是一樣的，程序員也還愛(ài)講笑話，也喜歡燒菜做飯，雖然大多是為了減減壓，這樣看來(lái)和常人沒(méi)什么不一樣。

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

"程序員 Jose Jesus Perez Aguinaga 在 CoderWall 分享了一個(gè)小技巧：在瀏覽器地址欄中輸入一行代碼：data:text/html, <html contenteditable> ，回車即可把瀏覽器變臨時(shí)編輯器（需要瀏覽器支持 HTML5 屬性 contenteditable）。不少程序員受 Jose 的啟發(fā)，開(kāi)始對(duì)這行代碼加工改造，比如改成支持 Ruby 語(yǔ)法高亮的編輯器……"

從引子中可以看到，本來(lái)只是簡(jiǎn)短的小段代碼： data:text/html, <html contenteditable>，經(jīng)過(guò)程序員們不斷改造，從一個(gè)簡(jiǎn)單的可編輯頁(yè)面，逐步變成了包括支持 Java、Ruby、Python 等多種編程語(yǔ)言高亮的代碼編輯器，截至不到 1 個(gè)小時(shí)的最后更新，我已經(jīng)看到了一個(gè)和 notepad.cc 網(wǎng)站功能相近，使用了第三方網(wǎng)站數(shù)據(jù)庫(kù) API 服務(wù)存儲(chǔ)內(nèi)容的在線編輯器了：

復(fù)制代碼代碼如下:

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>

將以上代碼完整復(fù)制，粘貼到 Chrome 或者 Firefox，Safari 瀏覽器地址欄中（不支持低版本 IE 瀏覽器），回車打開(kāi)，稍等片刻一個(gè)支持 CTRL + S 保存內(nèi)容的在線編輯器呈現(xiàn)眼前。

僅一行代碼，實(shí)現(xiàn)功能相當(dāng)于系統(tǒng)的記事本程序，感慨技術(shù)宅的藝術(shù)造詣吧？～

上一篇：JS獲取鍵盤上任意按鍵的值(實(shí)例代碼)

下一篇：JS中實(shí)現(xiàn)replaceAll的方法(實(shí)例代碼)