#极氪# 仅一行代码,打造一个在线编辑器

标签: 代码 在线 编辑 | 发表时间:2013-01-31 04:37 | 作者:xinzhi
出处:http://www.36kr.com/


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

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

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

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

Update: 感谢 @问题青年a 提供 CoderWall 分享原文。

除非注明,本站文章均为原创或编译,转载请注明: 文章来自 36氪

36氪官方iOS应用正式上线,支持『一键下载36氪报道的移动App』和『离线阅读』 立即下载!

相关 [代码 在线 编辑] 推荐:

#极氪# 仅一行代码,打造一个在线编辑器

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

基于OpenAI的代码编辑器:Cursor

- - 程序猿DD
最近随着OpenAI的一系列大动作,把软件领域搅的天翻地覆. 各行各业各领域,都出现了大量新产品. 开发工具领域首当其冲,各种新工具层出不穷,今天TJ就给大家推荐一个全新的开发工具:Cursor. 从官网介绍可以看到,Cursor基于OpenAI实现,继承了最新的GPT-4模型,支持Mac、Windows、Linux三大平台.

KindEditor 4.0 alpha 在线HTML编辑器

- kxxoling - cnBeta.COM
KindEditor 4.0 重新设计了程序架构,重写了所有代码,插件可以按需动态加载,内置了小巧实用的DOM(Node、Range)类库(Node的接口类似jQuery). 体积方面kindeditor-min.js被gzip后只有25.9KB,比jQuery还小,在大流量的互联网应用上使用毫无压力.

Codify:专为iPad打造的代码编辑器(视频)

- Stan - 36氪
以iPad为代表的平板电脑以其便携性赢得了大众人群的认可,你可以用它来看电影、读书、玩游戏、聊天,至于写东西就没有那么方便了,以至于有人专为iPad开发了实体键盘,比如这款很赞的实体键盘. 但我觉得这种思路本身就有问题,不应该用PC的观点去看待平板上的东西. 与其想方设法把平板变成一台PC,莫不如想在多点触控和重力加速计等平板特有的功能上做文章.

为iPad打造的代码编辑器 Codify

- Le - 开源中国社区最新软件
Codify是一个专为iPad开发的代码编辑器,有了它,你可以在iPad上开发游戏和模拟动画,通过多点触控等功能把你的想法变成一个互动作品. Codify自称是最漂亮的代码编辑器,专为触控设计,比如,如果你想修改一个数值,只需摁住,然后拖拽就行. 如果你想修改颜色或图片,编辑器会调出一个可视化窗口,让你选择你想要的颜色.

WebPutty – CSS 在线编辑和,托管 | 小众软件 > 在线应用

- zhipeng - 小众软件 - Appinn
在沃特二狗看来,写 C 的是码农,写 C++ 的也是码农,而写 CSS 的绝对是创意人士. WebPutty 就是针对 CSS 控的云服务,用户随时随地可登录修改维护自己的 CSS. WebPutty 提供运行在浏览器内的 CSS 编辑器,高亮查找功能全面;亮点是编辑时的即时预览,WYSIWYG.

xhEditor v1.1.9 发布,无障碍XHTML在线编辑器

- FPb - cnBeta.COM
感谢Yanis.Wang的投递. xhEditor是一个基于jQuery开发的简单迷你并且高效的无障碍可视化XHTML编辑器,基于网络访问并且兼容IE6,IE7,IE8,IE9,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+.

分享15款最强大的在线图片编辑软件

- Li - cnBeta.COM
在线图像编辑类软件是网页应用中较早出现的和比较成熟的在线应用,他们的功能非常强大,有的并不逊色桌面软件,甚至比桌面软件更为强大,这儿为大家做一个最强图像编辑软件大汇总.

Coderun – 在线运行代码 | 小众软件 > 在线应用

- guoan - 小众软件 - Appinn
Coderun 是一个在线的 IDE 编辑器,支持 C# 、 .Net 、 JavaScript 和 PHP 等语言,可以在线新建、编辑、运行、调试代码,也支持代码的上传和打包下载. 官方网站 | 来自小众软件. ©2011 root for 小众软件 | 原文链接 | 1 留言 | 加入我们 | 投稿 | 订阅指南.

百度推富文本开源编辑器 向第三方开放源代码

- Will - ITeye资讯频道
    百度正式发布Ueditor富文本Web编辑器,并向第三方开发者和团队开放编辑器源代码.     据了解,这款所见即所得的编辑器由百度web前端研发部开发,具有轻量,可定制,注重用户体验等特点. 业内人士认为,Ueditor开源编辑器能降低网站的开发成本,尤其在代码部署和定制化开发方面提供解决方案.