视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
只需一行代码,轻松实现一个在线编辑器_javascript技巧
2020-11-27 21:15:30 责编:小采
文档


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

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

"程序员 Jose Jesus Perez Aguinaga 在 CoderWall 分享了一个小技巧:在浏览器地址栏中输入一行代码:data:text/html, ,回车即可把浏览器变临时编辑器(需要浏览器支持 HTML5 属性 contenteditable)。不少程序员受 Jose 的启发,开始对这行代码加工改造,比如改成支持 Ruby 语法高亮的编辑器……"

从引子中可以看到,本来只是简短的小段代码: data:text/html, ,经过程序员们不断改造,从一个简单的可编辑页面,逐步变成了包括支持 Java、Ruby、Python 等多种 编程语言高亮的代码编辑器,截至不到 1 个小时的最后更新,我已经看到了一个和 notepad.cc 网站功能相近,使用了第三方网站数据库 API 服务存储内容的 在线编辑器 了:
代码如下:
data:text/html,





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.");
}
});
}
});
});


将以上代码完整复制,粘贴到 Chrome 或者 Firefox,Safari 浏览器地址栏中(不支持低版本 IE 浏览器),回车打开,稍等片刻一个支持 CTRL + S 保存内容的在线编辑器呈现眼前。

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

下载本文
显示全文
专题