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


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 相关文章推荐
Jquery 弹出层插件实现代码
Oct 24 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
firebug的一个有趣现象介绍
Nov 30 Javascript
javascript判断机器是否联网的2种方法
Aug 09 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
关于vue-router的那些事儿
May 23 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
VUE实现移动端列表筛选功能
Aug 23 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&amp;MYSQL分页原理及实现
2007/01/02 PHP
用PHP将数据导入到Foxmail的实现代码
2010/09/05 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
Python中动态检测编码chardet的使用教程
2017/07/06 Python
python在每个字符后添加空格的实例
2018/05/07 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
Python 项目转化为so文件实例
2019/12/23 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
keras topN显示,自编写代码案例
2020/07/03 Python
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
品质主管岗位职责
2014/03/16 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
靠谱的活动总结
2019/04/16 职场文书