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


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 相关文章推荐
javascript SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 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
PHP邮件专题
2006/10/09 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
php实现中文转数字
2016/02/18 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
JavaScript中的this机制
2016/01/30 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
js实现简单扫雷
2020/11/27 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
C面试题
2015/10/08 面试题
工商管理实习自我鉴定
2013/09/28 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
十八大宣传标语
2014/10/09 职场文书
《法国号》教学反思
2016/02/22 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书