一行代码,浏览器变临时编辑器

这是 Jose 在CoderWall 分享的一个小技巧:在浏览器地址栏中输入下面这行代码,回车即可把浏览器变临时编辑器。

为什么它能奏效?

这是用了数据URI的格式(Data URI’s format),并告诉浏览器渲染 HTML。不过 contenteditable 是 HTML5 的一个新全局属性,所以这个小技巧只能用于支持该属性的现代浏览器。(IE 8 – 就不行了 :( )

test in IE 8

 

并非只能纯文字,也可粘贴图片(如下图)。赶紧复制粘贴那行代码,然后回车,来试试呗。

test in Comodo

有趣的内容还在下面

不少程序员受 Jose 的启发,开始对这行代码加工改造了。

● jakeonrails 童鞋改成了一个支持 Ruby 代码高亮的编辑器  https://gist.github.com/4666256

test in Chrome 24

代码:

● slawdan 提示说:如果把上面的 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 的改造:编辑内容时,自动变换背景颜色;停止后变换白色。

 

● fvsch 的改造:

或直接戳 链接

这些个奇淫技巧就到此为止吧。

 

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

1 7 收藏 22 评论

关于作者:黄利民

伯乐在线联合发起人,关注 IT 和互联网。 个人主页 · 我的文章 · 97 ·  

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部