用Html5打造文本编辑器

前端攻城 2013-03-06 0条评论

data:text/html, <html contenteditable>

这是html5中用到的代码，只需要在浏览器地址输入，就是出现一个简陋的文本编辑器。

鉴于此，众多网友开始扩展编辑器的功能：

一：使用textarea标签代替html标签，可以添加自己喜欢的样式：

  1. data:text/html,   
  2. <textarea style="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none" autofocus />  

二：打字的时候编辑器的背景颜色会变化

  1. data:text/html,   
  2. <html><head>  
  3. <link href='http://fonts.lug.ustc.edu.cn/css?family=Open+Sans' rel='stylesheet' type='text/css'>  
  4. <style type="text/css">  
  5. html { font-family: "Open Sans" }   
  6. * { -webkit-transition: all linear 1s; }   
  7. </style>  
  8. <script>  
  9. window.onload=function(){   
  10. var e=false;var t=0;   
  11. setInterval(function(){   
  12. if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);   
  13. document.body.style.backgroundColor="#ff"+n+""+n},1e3);   
  14. var n=null;document.onkeydown=function(){   
  15. t=Math.min(128,t+2);e=true;clearTimeout(n);   
  16. n=setTimeout(function(){e=false},1500)   
  17. }   
  18. }   
  19. </script>  
  20. </head>  
  21. <body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">  

三：存储功能

  1. data:text/html,   
  2. <button onClick="SaveTextArea()">Save</button>  
  3. <script language="<a title="javascript" href="http://www.xyhtml5.com/javascript">javascript</a>" type="text/javascript">  
  4. function SaveTextArea() {   
  5. window.location = "data:application/octet-stream," + escape(txtBody.value); }   
  6. </script>  
  7. <textarea id="txtBody" style="font-size: 1.5em; width: 100%; height: 100%; boarder: none; outline: none" autofocus> </textarea>  

四：自动保存功能

  1. data:text/html,   
  2. <html lang="en"><head>  
  3. <style> html,body { height: 100% } #note { width: 100%; height: 100% } </style>  
  4. <script>  
  5. var note, html, timeout;   
  6. window.addEventListener('load', function() {   
  7. note = document.getElementById('note');   
  8. html = document.getElementsByTagName('html')[0];   
  9. html.addEventListener('keyup', function(ev) { if (timeout) clearTimeout(timeout);   
  10. timeout = setTimeout(saveNote, 100); }); restoreNote(); note.focus(); });   
  11. function saveNote() {   
  12. localStorage.note = note.innerText; timeout = null; }   
  13. function restoreNote() { note.innerText = localStorage.note || ''; }   
  14. </script>  
  15. </head><body>  
  16. <h1>Notepad (type below, notes persist)</h1> <p id="note" contenteditable=""></p>  
  17. </body></html>  

五：使用第三方API打造了一个在线编辑器,其中将“markdown”换成“python"即可切换高亮语言

  1. data:text/html,   
  2. <style type="text/css">  
  3. #e {   
  4. position:absolute;   
  5. top:0;   
  6. right:0;   
  7. bottom:0;   
  8. left:0;   
  9. font-size:16px;   
  10. }   
  11. </style>  
  12. <div id="e"></div>  
  13. <script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js"></script>  
  14. <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>  
  15. <script>  
  16. var myKey="SecretKeyz";   
  17. $(document).ready(function(){   
  18. var e;   
  19. var url = "http://api.openkeyval.org/"+myKey;   
  20. $.ajax({   
  21. url: url,   
  22. dataType: "jsonp",   
  23. success: function(data){   
  24. e = ace.edit("e");   
  25. e.setTheme("ace/theme/tomorrow_night_eighties");   
  26. e.getSession().setMode("ace/mode/markdown");   
  27. e.setValue(data);   
  28. }   
  29. });   
  30. $("#e").on("keydown", function (b) {   
  31. if (b.ctrlKey && 83 == b.which) {   
  32. b.preventDefault();   
  33. var data = myKey+"="+encodeURIComponent(e.getValue());   
  34. $.ajax({   
  35. data: data,   
  36. url: "http://api.openkeyval.org/store/",   
  37. dataType: "jsonp",   
  38. success: function(data){   
  39. alert("Saved.");   
  40. }   
  41. });   
  42. }   
  43. });   
  44. });   
  45. </script>  

六：没有代码高亮功能终归不是一个好的编辑器，有人又定制了Rubh代码高亮功能，不过

  1. data:text/html,   
  2. <style type="text/css">  
  3. #e{position:absolute;top:0;right:0;bottom:0;left:0;}   
  4. </style>  
  5. <div id="e"></div>  
  6. <script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>  
  7. <script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script>  

七：你以为到此为止了？有人又提供了一个涂鸦版本

  1. data:text/html,   
  2. <body><canvas id="dyDraw">你的浏览器不支持HTML5 Canvas</canvas>  
  3. </body>  
  4. <script>  
  5. function $(id){return document.getElementById(id);}   
  6. $('dyDraw').width=document.body.clientWidth;   
  7. $('dyDraw').height=document.body.clientHeight;   
  8. if(window.addEventListener){   
  9. window.addEventListener('load',function(){   
  10. var canvas,canvastext;var hua=false;   
  11. function dyDrawing(){canvas=$('dyDraw');   
  12. canvascanvastext=canvas.getContext('2d');   
  13. canvas.addEventListener('mousedown',canvasMouse,false);   
  14. canvas.addEventListener('mousemove',canvasMouse,false);   
  15. window.addEventListener('mouseup',canvasMouse,false);}   
  16. function canvasMouse(dy){   
  17. 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;}   
  18. x-=dyDraw.offsetLeft;y-=dyDraw.offsetTop;   
  19. 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)";   
  20. canvastext.lineWidth=9;canvastext.lineTo(x,y);canvastext.stroke();}}else if(dy.type=='mouseup'){hua=false;}} dyDrawing();},false);}   
  21. </script>  

版权声明：本文为原创文章，版权归 neo 所有。

本文链接：https://idayer.com/html5-build-text-editor/

知识共享许可协议
本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。

0 条评论