DIY 一个在线编辑器

DIY一个在线编辑器

Step1　复制以下代码：

适用于Chrome 25 dev 或 360安全浏览器6.0：

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>

适用于Firefox18：

data:text/html, %3Cstyle%20type%3D%22text%2Fcss%22%3E%23e%7Bposition%3Aabsolute%3Btop%3A0%3Bright%3A0%3Bbottom%3A0%3Bleft%3A0%3B%7D%3C%2Fstyle%3E%3Cdiv%20id%3D%22e%22%3E%3C%2Fdiv%3E%3Cscript%20src%3D%22http%3A%2F%2Fd1n0x3qji82z53.cloudfront.net%2Fsrc-min-noconflict%2Face.js%22%20type%3D%22text%2Fjavascript%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E%3Cscript%3Evar%20e%3Dace.edit(%22e%22)%3Be.setTheme(%22ace%2Ftheme%2Fmonokai%22)%3Be.getSession().setMode(%22ace%2Fmode%2Fruby%22)%3B%3C%2Fscript%3E

Step2　把代码粘贴到相应浏览器的地址栏里，回车，随即出现一个在线编辑器。

本方法制作的编辑器可支持：语法高亮，自动缩进，以及Ctrl + S 可保存当前内容。

原文来自：http://bbs.html5cn.org/thread-11163-1-1.html