有意思,一行代码浏览器变编辑器(HTML5)

原创
2013/01/30 13:13
阅读数 866

只要浏览器能支持HTML5,就可以在浏览器地址栏中输入一行代码:data:text/html, <html contenteditable> ,回车即可把浏览器变临时编辑器。

于是有人加强了一下,支持PHP、Python、Javascript、Java、C/C++和Ruby的语法高亮:

https://gist.github.com/4666256

PS:想做一个演示链接,可是Kindeditor不能插入这样的链接,只好放到自己的网站了。

演示地址: http://www.ipandao.com/browser-editor.html

兼容情况:

测试了一下,目前只有Chrome、Opera 12及国产双核浏览器高速模式下支持,IE系、火狐17都不行。

PHP编辑器:


Python编辑器:

Javascript:


示例代码:

<a href="data:text/html, &lt;style type=%22text/css%22&gt;#e{position:absolute;top:0;right:0;bottom:0;left:0;}&lt;/style&gt;&lt;div id=%22e%22&gt;&lt;/div&gt;&lt;script src=%22http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js%22 type=%22text/javascript%22 charset=%22utf-8%22&gt;&lt;/script&gt;&lt;script&gt;var e=ace.edit(%22e%22);e.setTheme(%22ace/theme/monokai%22);e.getSession().setMode(%22ace/mode/python%22);&lt;/script&gt;">打开Python编辑器</a> 

<a href="data:text/html, &lt;style type=%22text/css%22&gt;#e{position:absolute;top:0;right:0;bottom:0;left:0;}&lt;/style&gt;&lt;div id=%22e%22&gt;&lt;/div&gt;&lt;script src=%22http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js%22 type=%22text/javascript%22 charset=%22utf-8%22&gt;&lt;/script&gt;&lt;script&gt;var e=ace.edit(%22e%22);e.setTheme(%22ace/theme/monokai%22);e.getSession().setMode(%22ace/mode/ruby%22);&lt;/script&gt;">打开Ruby编辑器</a> 

相关文章阅读: 

一行代码,浏览器变临时编辑器: http://blog.jobbole.com/32823/
展开阅读全文
打赏
0
2 收藏
分享
加载中
叛道博主

引用来自“goober”的评论

原来如此啊!http://baike.baidu.com/view/5425534.htm

HTML在线编辑器也是这个原理,contentEditable="true"
2013/01/30 13:39
回复
举报
原来如此啊!http://baike.baidu.com/view/5425534.htm
2013/01/30 13:38
回复
举报
叛道博主

引用来自“您收到1条站内短消息”的评论

火狐不行。

什么版本的?我没测试火狐,如果这样的话,那就只能支持Chrome等Webkit内核的浏览器。
2013/01/30 13:37
回复
举报
火狐不行。
2013/01/30 13:33
回复
举报
更多评论
打赏
4 评论
2 收藏
0
分享
返回顶部
顶部