脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 在线编辑器

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

 更新时间：2013年11月12日 10:00:49   作者：  
在浏览器地址栏中输入一行代码：data:text/html, <html contenteditable> ，回车即可把浏览器变临时编辑器（需要浏览器支持 HTML5 属性 contenteditable）

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

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



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

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

相关文章

  • webpack打包html里面img后src为“[object Module]”问题

    webpack打包html里面img后src为“[object Module]”问题

    这篇文章主要介绍了webpack打包html里面img后src为“[object Module]”问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 微信小程序实现图片放大预览功能

    微信小程序实现图片放大预览功能

    这篇文章主要为大家详细介绍了微信小程序实现图片放大预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 用js编写的简单的计算器代码程序

    用js编写的简单的计算器代码程序

    这篇文章主要介绍了用js编写的简单的计算器代码程序，非常具有实用性,感兴趣的小伙伴可以参考下
    2015-08-08
  • PhotoShop给图片自动添加边框及EXIF信息的JS脚本

    PhotoShop给图片自动添加边框及EXIF信息的JS脚本

    这篇文章主要介绍了PhotoShop给图片自动添加边框及EXIF信息的JS脚本,本文给出效果图和实现代码,需要的朋友可以参考下
    2015-02-02
  • 一篇文章彻底讲清楚前端热更新

    一篇文章彻底讲清楚前端热更新

    这篇文章主要介绍了前端热更新的相关资料,热更新让前端开发更加高效,通过最小代价替换代码并保留页面状态,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-02-02
  • TypeScript中的never类型你了解吗

    TypeScript中的never类型你了解吗

    TypeScript 中的 never 类型,表示：永远不会发生的值的类型,换句话说,就是不可能存在的类型,即没有值的类型,那么你了解TypeScript中的never类型吗,感兴趣的朋友跟着小编一起来看看吧
    2023-10-10
  • JavaScript下的时间格式处理函数Date.prototype.format

    JavaScript下的时间格式处理函数Date.prototype.format

    这篇文章主要介绍了JavaScript下的时间格式处理函数Date.prototype.format的相关资料,需要的朋友可以参考下
    2016-01-01
  • JointJS JavaScript流程图绘制框架解析

    JointJS JavaScript流程图绘制框架解析

    这篇文章主要介绍了JointJS JavaScript流程图绘制框架解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • 详解JavaScript (!!) 中的双感叹号是干什么用的

    详解JavaScript (!!) 中的双感叹号是干什么用的

    JavaScript 不是静态语言，而是动态语言，这意味着变量可以引用或保存任何类型的值，此外，该类型可以随时更改，这篇文章主要介绍了JavaScript (!!) 中的双感叹号作用,需要的朋友可以参考下
    2022-09-09
  • 微信小程序实现之手势锁功能实例代码

    微信小程序实现之手势锁功能实例代码

    这篇文章主要介绍了微信小程序实现之手势锁功能的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07

最新评论