技术宅崇尚极致,喜欢极简,又希望简约不简单,背后就是技术宅满心思的不断的尝试,看看下面这段简单的代码给我们带来的效果吧:
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 浏览器都可以,但是低版本的不行哦。