一行代码将chrome浏览器变成在线编辑器

这是一个简单的在线Markdown编辑器,使用Ace和jQuery实现,并支持通过Ctrl+S保存内容到OpenKeyVal。

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

 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 浏览器都可以,但是低版本的不行哦。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值