V
Published on
· Last modified on
· Public

奇技淫巧之浏览器秒秒钟变编辑器

由来

有时,我仅仅想输入一些乱码。仅仅想放空自己。用编辑器来输入这些胡言乱语会使我很苦恼,因为这样会弄乱我项目的工作区。(我很挑剔,我懂得)

所以我就这么做。自从我生活在有浏览器的地方,我就只需打开新的标签,然后在地址栏里输入下面的内容:

data:text/html, <html contenteditable>

瞧,浏览器记事本。

为什么代码会有效

你不需要记住它。它不是rocket science(哈哈,这里不是火箭科学,更不是那部电影,此处指艰深的学问以及复杂伤身的工作)。我们正在使用数据URI格式Data URI's format并且告诉浏览器对html进行渲染(尝试一下"javascript:alert('Bazinga');")。html所说的内容是一种带有HTML的contenteditable(内容可编辑)的属性的HTML line。这仅仅在能识别这种属性的现代的浏览器上是有效的。点击编辑吧!

以上就是翻译的全部内容,原文戳这里

效果图:

More

在作者发布这个消息之后,有很多的大神开始开动脑筋,绞尽脑汁,开始创作了各种碉堡的浏览器编辑器。下面这一款我比较喜欢的:

data:text/html, <style type="text/css">.e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div class="e" id="editor"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("editor");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/java");</script>

效果出众,最重要的是支持多种语言想用其它的语言的话,仅仅需要把ace/mode/python用下面的换掉即可:

Markdown -> `ace/mode/markdown`
Python -> `ace/mode/ruby`
C/C++ -> `ace/mode/c_cpp`
Javscript -> `ace/mode/javascript`
Java -> `ace/mode/java`
Scala- -> `ace/mode/scala`
CoffeeScript -> `ace/mode/coffee`
and 
css, html, php, latex, 
tex, sh, sql, lua, clojure, dart, typescript, go, groovy, json, jsp, less, lisp, 
lucene, perl, powershell, scss, textile, xml, yaml, xquery, liquid, diff and many more...

更碉堡的是,主题也可以换的,仅仅把ace/theme/monokai用下面的换掉即可

Eclipse -> ace/theme/eclipse
GitHub -> ace/theme/github
TextMate -> ace/theme/textmate
and 
ambiance, dawn, chaos, chrome, dreamweaver, xcode, vibrant_ink, solarized_dark, solarized_light, tomorrow, tomorrow_night, tomorrow_night_blue, 
twilight, tomorrow_night_eighties, pastel_on_dark and many more..

如果你想用Markdown的话用下面的代码即可

data:text/html,<style type="text/css">.e{position:absolute;top:0;right:50%;bottom:0;left:0;} .c{position:absolute;overflow:auto;top:0;right:0;bottom:0;left:50%;}</style><div class="e" id="editor"></div><div class="c"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script><script> function showResult(e){consoleEl.innerHTML=e}var e=ace.edit("editor");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/markdown");var consoleEl=document.getElementsByClassName("c")[0];var converter=new Showdown.converter;e.commands.addCommand({name:"markdown",bindKey:{win:"Ctrl-M",mac:"Command-M"},exec:function(t){var n=e.getSession().getMode().$id;if(n=="ace/mode/markdown"){showResult(converter.makeHtml(t.getValue()))}},readOnly:true})</script>

还有一个比较好玩的,是一个在编辑过程中会变色的,大家可以试试:

data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><style type="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }</style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">

另外我已经将代码放在github上了,欢迎Fork。浏览器-编辑器

最后附上一张Python编辑器的图:

I
Published on

干得漂亮

V
Published on
ibrother:

干得漂亮

嘿嘿

G
Published on

已星

S
Published on

已星,求星...

V
Published on
greyby:

已星

谢谢~

V
Published on
simodorg:

已星,求星...

谢谢,你的链接呢?

M
Published on

已星,求赞,点我的名字就可以啦

B
Published on

已星,求星

T
Published on

好高级啊...

F
Published on

为什么用chrome 后面几个都无效?

V
Published on
fan123199:

为什么用chrome 后面几个都无效?

你的chrome什么版本?我的都正常运行的啊。。。话说你不会把说明给复制进去了吧。。。

M
Published on
H
Published on

已星,求星~

P
Published on

求星 已星

J
Published on
P
Published on

有意思,已星

D
Published on

八错,

L
Published on

要是在你加载的js里弄点病毒,不是死得俏俏的~~~不过还是有点意思,已经加入肯德基豪华午餐~(其实就是加入了书签,点一下就开了,很方便)

Y
Published on

挺有意思的~~!

Sign in or Sign up Leave Comment