最新消息:把Logo换了一下,虽然丑了点,但至少完全是自己的设计

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

10.软件使用 宇托 351浏览 暂无评论

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

HTML
data:text/html, <html contenteditable>

为什么它能奏效?

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

有趣的内容还在下面

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

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

代码:

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

分析一下上面的代码,它是用了AceEditor,来实现一个代码编辑器。

● 其中http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js表示ace的目录。

现在cloudfront在国内好像被墙了,那么我们可以用其它的AceEditor源来代替,比如cloudflare的源(http://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js)或者国内的bootcss的源(http://cdn.bootcss.com/ace/1.2.3/ace.js)。

● 其中e.setTheme("ace/theme/monokai");表示显示的样式。

你可以去http://www.bootcdn.cn/ace/ 查找以theme-开头的文件,其后面的部分就是样式名。
比如,我们可以找到theme-eclipse.js,那么就表示存在一个eclipse的样式。我们就可以把上面的语句设置为e.setTheme("ace/theme/eclipse");

● 其中e.getSession().setMode("ace/mode/ruby");表示编辑的代码高亮方式。

你可以去http://www.bootcdn.cn/ace/ 查找以mode-开头的文件,其后面的部分就是样式名。
比如,我们可以找到mode-golang.js,那么就表示存在golang的Go语言高亮方式。我们就可以把上面的语句设置为e.getSession().setMode("ace/mode/golang");

● 另外,虽然代码里没有写,但我们也可以设置字体大小

设置方法是,在e.getSession().setMode("ace/mode/ruby");之后加上字体大小的设置方法就行。比如 ,我要把字体设置成14px,可以用:e.setFontSize(14);


参考地址:一行代码,浏览器变临时编辑器

转载请注明:宇托的狗窝 » 用一行代码使浏览器变临时编辑器

发表我的评论
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址