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


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对象与JSON格式数据相互转换
Feb 20 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
Angular的自定义指令以及实例
Dec 26 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
新版小程序登录授权的方法
Dec 12 Javascript
JS使用new操作符创建对象的方法分析
May 30 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
JS如何在不同平台实现多语言方式
Jul 16 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自动适应范围的分页代码
2008/08/05 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
Python字符串中查找子串小技巧
2015/04/10 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
简单的Python调度器Schedule详解
2019/08/30 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
django项目中新增app的2种实现方法
2020/04/01 Python
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
文员自我评价怎么写
2013/09/19 职场文书
家教广告词
2014/03/19 职场文书
预防煤气中毒方案
2014/06/16 职场文书
2015年教研员工作总结
2015/05/26 职场文书
理想国读书笔记
2015/06/25 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript