一行代码，浏览器变临时编辑器
2013-01-31 09:23
204 查看
这是 Jose 在CoderWall 分享的一个小技巧：在浏览器地址栏中输入一行代码：data:text/html, <html contenteditable> ，回车即可把浏览器变临时编辑器。
为什么它能奏效？
这是用了数据URI的格式（Data URI’s format），并告诉浏览器渲染 HTML。不过 contenteditable 是 HTML5 的一个新全局属性，所以这个小技巧只能用于支持该属性的现代浏览器。（IE 8 – 就不行了
）
并非只能纯文字，也可粘贴图片（如下图）。赶紧复制粘贴那行代码，然后回车，来试试呗。
有趣的内容还在下面
不少程序员受 Jose 的启发，开始对这行代码加工改造了。
● jakeonrails 童鞋改成了一个支持 Ruby 代码高亮的编辑器 https://gist.github.com/4666256
代码：
● slawdan 提示说：如果把上面的
● jdkanani 后来的补充：（2013-1-30 22:06:48 更新）
不想复制粘贴代码的懒汉童鞋，可以直接戳下面这些链接：
Ruby 编辑器 、Python 编辑器、PHP 编辑器 、Javascript 编辑器 、Java 编辑器 、C/C++ 编辑器 （也可把这些链接作为浏览器书签收藏哦。）
● montas 的改造：You can use textarea and make it “invisible” if you want autofocus.
或直接戳 链接。
● bgrins 的改造：编辑内容时，自动变换背景颜色；停止后变换白色。
● fvsch 的改造：
或直接戳 链接。
这些个奇淫技巧就到此为止吧。
编译整理：伯乐在线 - 黄利民
文章链接：http://blog.jobbole.com/32823/
为什么它能奏效？
这是用了数据URI的格式（Data URI’s format），并告诉浏览器渲染 HTML。不过 contenteditable 是 HTML5 的一个新全局属性，所以这个小技巧只能用于支持该属性的现代浏览器。（IE 8 – 就不行了
）
并非只能纯文字，也可粘贴图片（如下图）。赶紧复制粘贴那行代码，然后回车，来试试呗。
有趣的内容还在下面
不少程序员受 Jose 的启发，开始对这行代码加工改造了。
● jakeonrails 童鞋改成了一个支持 Ruby 代码高亮的编辑器 https://gist.github.com/4666256
代码：
ace/mode/ruby 改成
ace/mode/python，那么就得到了一个 Python 版的编辑器咯。其他语言依此类推。
● jdkanani 后来的补充：（2013-1-30 22:06:48 更新）
Ruby 编辑器 、Python 编辑器、PHP 编辑器 、Javascript 编辑器 、Java 编辑器 、C/C++ 编辑器 （也可把这些链接作为浏览器书签收藏哦。）
● montas 的改造：You can use textarea and make it “invisible” if you want autofocus.
● bgrins 的改造：编辑内容时，自动变换背景颜色；停止后变换白色。
这些个奇淫技巧就到此为止吧。
编译整理：伯乐在线 - 黄利民
文章链接：http://blog.jobbole.com/32823/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 一行代码，浏览器变临时编辑器
- 一行代码，浏览器变临时编辑器
- 一行代码，浏览器变临时编辑器
- 一行代码，浏览器变临时编辑器
- 在浏览器地址栏中输入一行代码把浏览器变成临时文本编辑器
- 一行代码，浏览器变临时编辑器
- 一行代码，浏览器变临时编辑器
- 一行代码，浏览器变临时编辑器
- 一行代码，浏览器变临时编辑器
- 一行代码，浏览器变临时编辑器
- <转载>仅一行代码，使用浏览器打造一个在线编辑器
- 一行代码让浏览器变编辑器
- 让现代浏览器变为临时代码编辑器
- 11.16 快速计算出某数字的+1或^2的总次数，一行代码浏览器变编码编辑器
- 一行代码让浏览器变编辑器
- 只需一行代码,轻松实现一个在线编辑器
- 一行代码保存fckeditor编辑器提交的内容到文件（接上一博）
- 20个最强的基于浏览器的在线代码编辑器
- 写UBB编辑器心得--编写浏览器兼容的 JavaScript 代码
- 一行代码，打造一个在线编辑器，方便好用