技术宅崇尚极致,喜欢极简,又希望简约不简单,背后就是技术宅满心思的不断的尝试,看看下面这段简单的代码给我们带来的效果吧:



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 = ace.edit("e");
19     var url = "http://api.openkeyval.org/"+myKey;
20     $.ajax({
21       url: url,
22       dataType: "jsonp",
23       success: function(data){
24        e.setTheme("ace/theme/tomorrow_night_eighties");
25        e.getSession().setMode("ace/mode/markdown");
26        e.setValue(data);
27       }
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>



将以上代码粘贴至浏览器地址栏里,回车看看什么效果? 而且还是一个支持ctrl+s保存的在线编辑器哦。

特别说明: Chrome 或者 Firefox,Safari 浏览器都可以,但是低版本的不行哦。