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

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

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

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

<script><BR>var myKey="SecretKeyz";<BR>$(document).ready(function(){<BR> var e = ace.edit("e");<BR> var url = "http://api.openkeyval.org/"+myKey;<BR> $.ajax({<BR> url: url,<BR> dataType: "jsonp",<BR> success: function(data){<BR> e.setTheme("ace/theme/tomorrow_night_eighties");<BR> e.getSession().setMode("ace/mode/markdown");<BR> e.setValue(data);<BR> }<BR> }); <P> $("#e").on("keydown", function (b) {<BR> if (b.ctrlKey && 83 == b.which) {<BR> b.preventDefault();<BR> var data = myKey+"="+encodeURIComponent(e.getValue());<BR> $.ajax({<BR> data: data,<BR> url: "http://api.openkeyval.org/store/",<BR> dataType: "jsonp",<BR> success: function(data){<BR> alert("Saved.");<BR> }<BR> });<BR> }<BR> });<BR>});<BR></script>

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

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