浏览器编辑器

Yuqian Ma -

浏览器变文本编辑器（甚至画图板）。由36kr引导，发现了一群NB程序猿……

原文：仅一行代码，打造一个在线编辑器

github：https://gist.github.com/minikomi/4672169

需要HTML5支持

data:text/html, <html contenteditable>
  
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>  

  
data:text/html, <body><canvas id="dyDraw">你的浏览器不支持HTML5 Canvas</canvas></body><script>function $(id){return document.getElementById(id);} $('dyDraw').width=document.body.clientWidth;$('dyDraw').height=document.body.clientHeight;if(window.addEventListener){window.addEventListener('load',function(){var canvas,canvastext;var hua=false;function dyDrawing(){canvas=$('dyDraw');canvastext=canvas.getContext('2d');canvas.addEventListener('mousedown',canvasMouse,false);canvas.addEventListener('mousemove',canvasMouse,false);window.addEventListener('mouseup',canvasMouse,false);} function canvasMouse(dy){var x,y;if(dy.layerX||dy.layerX==0){x=dy.layerX;y=dy.layerY;}else if(dy.offsetX||dy.offsetX==0){x=dy.offsetX;y=dy.offsetY;} x-=dyDraw.offsetLeft;y-=dyDraw.offsetTop;if(dy.type=='mousedown'){hua=false;canvastext.beginPath();canvastext.moveTo(x,y);hua=true;}else if(dy.type=='mousemove'){if(hua){canvastext.strokeStyle="rgb(255,0,0)";canvastext.lineWidth=9;canvastext.lineTo(x,y);canvastext.stroke();}}else if(dy.type=='mouseup'){hua=false;}} dyDrawing();},false);}</script>

程序猿的乐趣就在于此了……