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

最新推荐文章于 2024-09-29 22:06:06 发布

转载最新推荐文章于 2024-09-29 22:06:06 发布 · 446 阅读

HTML 专栏收录该内容

2 篇文章

订阅专栏

通过一行HTML5代码，程序员将浏览器转变为支持多种编程语言高亮的在线编辑器，并利用第三方API实现内容保存功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载自：（http://www.html5cn.org/article-4611-1.html）

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

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

" 程序员 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>