HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > 仅一行代码,打造一个在线编辑器

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

  


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


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


" 程序员 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 分享原文。

【仅一行代码,打造一个在线编辑器】相关文章

1. 仅一行代码,打造一个在线编辑器

2. 5款非常好用的前端在线编辑器推荐

3. Sencha Touch 2:一行代码就将Web应用变本地应用

4. 一行代码即可绘制出漂亮的图表

5. 10个程序员最喜欢的HTML和CSS等在线代码编辑器

6. 一个在线预览所有原生 HTML5 表单元素效果的网站

7. Opera与威视联手,打造创新电视网络体验

8. 微软应该联手Firefox OS,打造破坏性生态系统

9. 9个最好用的JavaScript开发工具和代码编辑器

10. CodeMirror:基于JavaScript的代码编辑器

本文来源:https://www.51html5.com/a3090.html

点击展开全部

﹝仅一行代码,打造一个在线编辑器﹞相关内容

「仅一行代码,打造一个在线编辑器」相关专题

其它栏目

也许您还喜欢