只需一行代码,轻松实现一个在线编辑器


Posted in Javascript onNovember 12, 2013

在大部分人眼里,技术宅给人的印象是沉默寡言,总摸不透他心里想些什么,彼此都保持距离。作为半个程序员,我觉得真正的技术宅大部分时间都在找乐子,鼓捣各种想法,和大部分人的极客心理是一样的,程序员也还爱讲笑话,也喜欢烧菜做饭,虽然大多是为了减减压,这样看来和常人没什么不一样。

不一样的地方,技术宅崇尚极致,喜欢极简,又希望简约不简单,背后就是技术宅满心思的不断的尝试,我正在看着一出好戏在上演:

只需一行代码,轻松实现一个在线编辑器

"程序员 Jose Jesus Perez Aguinaga 在 CoderWall 分享了一个小技巧:在浏览器地址栏中输入一行代码:data:text/html, <html contenteditable> ,回车即可把浏览器变临时编辑器(需要浏览器支持 HTML5 属性 contenteditable)。不少程序员受 Jose 的启发,开始对这行代码加工改造,比如改成支持 Ruby 语法高亮的编辑器……"

从引子中可以看到,本来只是简短的小段代码: data:text/html, <html contenteditable>,经过程序员们不断改造,从一个简单的可编辑页面,逐步变成了包括支持 Java、Ruby、Python 等多种 编程语言高亮的代码编辑器,截至不到 1 个小时的最后更新,我已经看到了一个和 notepad.cc 网站功能相近,使用了第三方网站数据库 API 服务存储内容的 在线编辑器 了:

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>

将以上代码完整复制,粘贴到 Chrome 或者 Firefox,Safari 浏览器地址栏中(不支持低版本 IE 浏览器),回车打开,稍等片刻一个支持 CTRL + S 保存内容的在线编辑器呈现眼前。

仅一行代码,实现功能相当于系统的记事本程序,感慨技术宅的艺术造诣吧?~

Javascript 相关文章推荐
js 学习笔记(三)
Dec 29 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
Html5的placeholder属性(IE兼容)实现代码
Aug 30 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
vue组件name的作用小结
May 23 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 #Javascript
jquery.validate的使用说明介绍
Nov 12 #Javascript
javascript 函数及作用域总结介绍
Nov 12 #Javascript
Javascript之this关键字深入解析
Nov 12 #Javascript
js hover 定时器(实例代码)
Nov 12 #Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 #Javascript
javascript实用小函数使用介绍
Nov 11 #Javascript
You might like
提问的智慧(2)
2006/10/09 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
php5与php7的区别点总结
2019/10/11 PHP
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
Python统计单词出现的次数
2018/04/04 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
基于Python List的赋值方法
2018/06/23 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
网站域名和主机:Domain.com
2019/04/01 全球购物
公关关系专员的自我评价分享
2013/11/20 职场文书
初一生物教学反思
2014/01/18 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
小学中队活动总结
2015/05/11 职场文书
世界名著读书笔记
2015/06/25 职场文书
保护动物的宣传语
2015/07/13 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书