一行HTML5代碼能做什么？國外開發(fā)者Jose Jesus Perez Aguinaga寫了一行HTML5代碼的文本編輯器。這件事在分享到Code Wall、Hacker News之后，引起了眾多開發(fā)者的注意，紛紛發(fā)表了自己的創(chuàng)意。 這是最初的HTML5代碼，它可以運(yùn)行在最新的Chrome和Firefox中，只需在瀏覽器地址欄輸入如下代碼：


data:text/html, <  html   contenteditable> 

但是功能十分有限，甚至沒有保存功能，樣式也非常簡(jiǎn)陋。 于是，網(wǎng)友Montas修改了他的代碼，使用textarea標(biāo)簽代替html標(biāo)簽，可以添加自己喜歡的樣式：

data:text/html, <  textarea   style  =  "font-size: 1.5em; width: 100%; height: 100%; border: n 

網(wǎng)友jecxjo希望能有存儲(chǔ)功能：

data:text/html,<  button   onClick  =  "SaveTextArea()"  >Save</  button  > <  script   languag 

但上面的代碼是以文件形式存儲(chǔ)，samsonjs覺得不夠方便，而且需要點(diǎn)擊按鈕，于是添加了自動(dòng)保存功能：

data:text/html,<  html   lang  =  "en"  ><  head  ><  style  > html,body { height: 100% } #n 

現(xiàn)在可是云時(shí)代！僅僅這樣怎能讓開發(fā)者止步？minikomi使用了第三方API打造了一個(gè)在線編輯器：

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; 
var url = "http://api.openkeyval.org/"+myKey; 
$.ajax({ 
url: url, 
dataType: "jsonp", 
success: function(data){ 
e = ace.edit("e"); 
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> 

沒有代碼高亮功能的編輯器終究不適合程序員，Rails開發(fā)者jakeonrails又定制了Ruby代碼高亮功能：

data:text/html, <style type=  "text/css"  >  #e{position:absolute;top:0;right:0;bottom:0;left 

效果如下圖：

實(shí)際上，如果minikomi的代碼已經(jīng)支持多種語言高亮，如Python，只需要把“markdown”換成“python”，效果如下：

你以為到此為止了？中國開發(fā)者assassindesign覺得只是文本編輯器就太無聊了，又提供了涂鴉版本：

data:text/html, <  body  ><  canvas   id  =  "dyDraw"  >你的瀏覽器不支持HTML5 Canvas</  canva 

還等什么呢？趕快試試看吧！ 極客的創(chuàng)意的無窮的，你們是否有更好的創(chuàng)意，歡迎跟帖！

原文鏈接：http://www.csscoo.com/?p=1025