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

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

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

"程序员 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 保存内容的在线编辑器呈现眼前。

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

赞 (0)

相关推荐

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

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

    在大部分人眼里,技术宅给人的印象是沉默寡言,总摸不透他心里想些什么,彼此都保持距离.作为半个程序员,我觉得真正的技术宅大部分时间都在找乐子,鼓捣各种想法,和大部分人的极客心理是一样的,程序员也还爱讲笑话,也喜欢烧菜做饭,虽然大多是为了减减压,这样看来和常人没什么不一样. 不一样的地方,技术宅崇尚极致,喜欢极简,又希望简约不简单,背后就是技术宅满心思的不断的尝试,我正在看着一出好戏在上演: "程序员 Jose Jesus Perez Aguinaga 在 CoderWall 分享了一个小技巧:在浏

  • JavaScript 轻松搞定快捷留言功能 只需一行代码

    JavaScript 轻松搞定快捷留言功能 只需一行代码

    别急,方法非常简单,还是先听我说说它的来历吧... 最开始,快捷留言这个功能要追溯到发表[AjaxControlToolkitTests自动测试框架完全解析之一:架构篇]这篇文章的时候,当时它纯粹是那篇文章的副产品,本来没太在意,本想只是给像我一样的懒人准备的一条捷径而已,后来因为没有提示这个功能会直接自动提交留言,还引起了几枚同学的不满意,于是后来又在醒目位置加上了提示:[提示:快捷链接会直接推荐并提交留言信息.],才平息了局势: 再后来,有部分同学可能是鼠标太高级,连击速度特别快的原因,每次

  • JDK1.7 之java.nio.file.Files 读取文件仅需一行代码实现

    JDK1.7中引入了新的文件操作类java.nio.file这个包,其中有个Files类它包含了很多有用的方法来操作文件,比如检查文件是否为隐藏文件,或者是检查文件是否为只读文件.开发者还可以使用Files.readAllBytes(Path)方法把整个文件读入内存,此方法返回一个字节数组,还可以把结果传递给String的构造器,以便创建字符串输出.此方法确保了当读入文件的所有字节内容时,无论是否出现IO异常或其它的未检查异常,资源都会关闭.这意味着在读文件到最后的块内容后,无需关闭文件.要注意

  • JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版

    JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版

    前天熬了大半宿发了一篇[一行代码轻松搞定快捷留言功能],同时发布了V1.0beta版的快捷留言功能和源代码,之所以是beta版,就是当时感觉虽然基本功能有了,但是还不够完善,特性也不一定合理,今天不知不觉又弄到了这个时候,这次对上一版做了很大改进: 首先,原来自动提交留言信息的同时会自动推荐,大量的推荐数,直接影响了博客园的推荐排名机制,所以后来在第一时间修改成了询问是否要推荐的交互模式! 其次,虽然快捷功能有了,并且很好用,但是满屏幕的"好贴!我顶你!"也确实有些审美疲劳了,并且没什

  • 200行代码轻松实现一个简单的区块链

    200行代码轻松实现一个简单的区块链

    英文原文:Lauri Hartikka 区块链的基础概念很简单:一个分布式数据库,存储一个不断加长的 list,list 中包含着许多有序的记录.然而,在通常情况下,当我们谈到区块链的时候也会谈起使用区块链来解决的问题,这两者很容易混淆.像流行的比特币和以太坊这样基于区块链的项目就是这样."区块链"这个术语通常和像交易.智能合约.加密货币这样的概念紧紧联系在一起. 这就令理解区块链变得不必要得复杂起来,特别是当你想理解源码的时候.下面我将通过 200 行 JS 实现的超级简单的区块链来

  • 基于jquery的一行代码轻松实现拖动效果

    实现拖动效果. 复制代码 代码如下: $(document).ready( function() { $("#divPanel").easydrag(); } ); Html 代码 复制代码 代码如下: <div id="divPanel" style="width:300px;height:300px;background:white;border:1px solid #000000;position:absolute;left:5px;top:5

  • Sql Server 2012完全卸载方法 只需8步轻松卸载

    Sql Server 2012完全卸载方法 只需8步轻松卸载

    轻松通过八步实现Sql Server 2012完全卸载,供大家参考,具体内容如下 第一步,在控制面板里面找到程序--卸载程序这一项,打开之后就会是这样的了 第二步,经过第一步打开卸载程序后,在里面找到Microsoft SQLserver 2012 (64-bit)这一项,可以通过右上角搜索框寻找 第三步,点击右键,卸载,此时安装程序启动,开始着手删除SQL了 第四步,选择实例选择需要删除的内容,在这里有选择实例--选择功能--删除规则-- 准备删除--删除进度--完成,点击下一步,进行删除,下

  • JS封装的三级联动菜单(使用时只需要一行js代码)

    JS封装的三级联动菜单(使用时只需要一行js代码)

    前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大家分享我在工作中封装并在项目中使用的三级级联操作代码,如有错误或者不当的地方欢迎大家指正. 使用简单(只需要一行代码) 可以根据需要设置是否显示"请选择"项 支持回调(在三级分类加载完成后触发回调事件) 支持一个页面多个级联菜单 演示效果预览: 三级联动封装 原理:将selec标签以及相关

  • Okhttp、Retrofit进度获取的方法(一行代码搞定)

    Okhttp、Retrofit进度获取的方法(一行代码搞定)

    起因 对于广大Android开发者来说,最近用的最多的网络库,莫过于Okhttp啦(Retrofit依赖Okhttp). Okhttp不像SDK内置的HttpUrlConnection一样,可以明确的获取数据读写的过程,我们需要执行一些操作. 介绍 Retrofit依赖Okhttp.Okhttp依赖于Okio.那么Okio又是什么鬼?别急,看官方介绍: Okio is a library that complements java.io and java.nio to make it much

  • Android实现侧滑只需一步

    Android实现侧滑只需一步

    先解释一下这个标题,说的是实现App侧滑返回功能只需要一行代码就能搞定,怎么做到的我待会会说.侧滑所指的就是侧滑返回,后面的介绍过程我将用侧滑表面其意.请看侧滑效果如下图: Github地址:0侵入侧滑返回 使用 在 Application 初始化 SwipeBackHelper.init(this); // 就这一步操作 本篇不打算长篇大论解释原理,只想跟大家说一下我的思考. 笔者的项目中也有侧滑返回功能,和很多侧滑的开源项目一样,需要继承swipeBackActivity基类,实现控制侧滑返

随机推荐