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

只要浏览器能支持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

有意思,一行代码浏览器变编辑器(HTML5)_第1张图片

兼容情况:

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

PHP编辑器:

有意思,一行代码浏览器变编辑器(HTML5)_第2张图片

Python编辑器:

有意思,一行代码浏览器变编辑器(HTML5)_第3张图片

Javascript:

有意思,一行代码浏览器变编辑器(HTML5)_第4张图片

示例代码:

<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/

你可能感兴趣的:(html5,浏览器,编辑器)