让Sublime Text2支持浏览器中预览

In: 软件工具  

20 02 2012

从Editplus转到Sublime Text2的同学,不知道有没觉得它少了个很有用的功能:view in browser(ctrl+b)。平时写点小demo时,那种一秒钟切浏览器看下效果,一秒后再切回来改下代码的爽快感,是我坚守Editplus多年的一大重要原因。

Editplus提供的ctrl+b功能,好用的原因有二:一是内置了webbrowser,切换时不用离开编辑器;二是对于本地调试的web站点,配置规则后自动将编辑的文件映射为URL来预览,这对预览php等服务端文件非常有用。Mac下的Coda,也有类似的预览功能,但我一直用不习惯它,暂不考虑。

Sublime Text2支持用Python编写插件,我很想自己动手解决这个问题,但估计短期内我没可能研究出如何创建webbrowser嵌进ST2里,于是打算偷点懒,直接调系统默认浏览器预览。下面是我研究出来的详细步骤(想直接使用插件的同学请直接看最后):

一、点击菜单Tools -> New Plugin...,在创建好的py文件输入下列内容:

import sublime, sublime_plugin
import webbrowser

url_map = {
	'/Users/jerry/Sites/test/' : 'http://test/',
}

class OpenBrowserCommand(sublime_plugin.TextCommand):
	def run(self,edit):
		window = sublime.active_window()
		window.run_command('save')
		url = self.view.file_name()
		for path, domain in url_map.items():
			if url.startswith(path):
				url = url.replace(path, domain).replace('\\', '\/')
				break

		webbrowser.open_new(url)

代码只有几行,大部分还是参考的这个帖子,相信大家一眼就能看明白,不解释了。

将文件保存到Packages/User目录(Packages可通过菜单里的Browser Packages...打开),文件名随意,如open_browser.py。插件部分完工了。

二、接下来,为刚才的插件分配快捷键。点菜单Tools -> Command Palette...,或者shift+cmd+p,打开命令集,选择“key Bindings - User”打开个人快捷键配置,输入下列内容:

[{ "keys": ["ctrl+shift+b"], "command": "open_browser" }]

这就是要做的全部工作,可以测试下了。打开一个html文件,ctrl+shift+b试试,没意外的话文件会在默认浏览器打开了。url_map里配置的站点目录到URL的映射应该也是可用的。

PS:如果要指定用什么浏览器预览,也可以将最后一行代码改成这样:

webbrowser.get('safari').open_new(url)

webbrowser具体支持get哪些浏览器,可以通过webbrowser._browsers查看。只是,ST2默认使用的是python2.6,在我的mac os下,python2.6找不到任何可用的浏览器。2.7的webbrowser.py里多了一段patch,可以找到firefox和safari。好在,对我来说,能在默认浏览器预览已经够用了。

先写到这里,如果我哪天找到了更好的方法,再来补充。

update @ 2012-02-23:在月影的帮助下,加上了预览前先保存的功能,正文里代码已更新,并已提交到github,可以直接下载使用,https://github.com/qgy18/sublime-view-in-browser

本文链接:http://www.imququ.com/post/view_sublime-text-2_file_in_browser.html

--EOF--

13 Responses to 让Sublime Text2支持浏览器中预览

Avatar

5单元

Feb. 20, 2012, 1:05 p.m.

这几天正在想这个问题,不知道有什么办法可以实现,这个文章来的很及时。thx.

Avatar

十年踪迹

Feb. 23, 2012, 10:32 a.m.

我知道怎么换mac下sublime的默认版本 把/opt/local/Library/Frameworks/Python.framework/Versions/2.6/python 移掉,换成对应的2.7版本的python软链

Avatar

Jerry Qu

Feb. 23, 2012, 10:35 a.m.

@十年踪迹,这都行。。。

Avatar

cnyao

March 7, 2012, 1:56 p.m.

IE现在是可以打开了,不过想用chrome打开却不行。 代码为: webbrowser.get('chrome %s').open_new(url) 在python shell中试了一下,返回为false. 但是webbrowser.get('chrome %s')返回为 <webbrowser.GenericBrowser object at 0x01262F90> 不知道能否在chrome中打开,系统为XP,python为2.7版本

Avatar

cc

March 15, 2012, 10:33 a.m.

我是用的win7系统,用此方法调用IE9打开当前文件,速度极其之慢。 摸索一番,将以上代码简化如此: ========================================= class OpenBrowserCommand(sublime_plugin.TextCommand): def run(self,edit): url = self.view.file_name() webbrowser.open_new(url) ========================================= 舍去了一些规则,但是浏览器基本实现秒开了 :-D 但是windows版没有webbrowser.py这个文件,我也不晓得怎么去编写脚本实现,望能指点一二!

Avatar

cc

March 15, 2012, 10:40 a.m.

我是个鼠标党,快捷键太多会头疼。 貌似已经实现了右键菜单=》run in browser ! 哈哈,要是能解决浏览器选择的问题,就可以舍弃别的浏览器了!

Avatar

Jerry Qu

March 15, 2012, 10:43 a.m.

@cc,加193076432群讨论吧,群里有不少sublime text2高手~

Avatar

jin

March 22, 2012, 10:04 a.m.

怎么zenCoding的缩写设置呢,类似editplus下的acp配置

Avatar

gust

March 26, 2012, 4:10 p.m.

想用google浏览器的话可以这样 webbrowser.get('/usr/bin/google-chrome %s')

Avatar

gust

March 26, 2012, 4:12 p.m.

我是在ubuntu11.10环境下

Avatar

hoowolf

March 31, 2012, 1:36 a.m.

非常感谢你的工作!!!

Avatar

March 31, 2012, 6:23 a.m.

困扰了我好几天的问题,不过最后还是让我解决了,要早让我看见这个文章该多好啊,那我也不用烦恼那么久了~ 其实我那个解决方法更简单,下载个侧边栏右击菜单增强插件就行了,自带有从浏览器打开= =!

Avatar

dron

April 21, 2012, 1:04 a.m.

嗯!太有用了,终于完美找回 EditPlus 的感觉了。

Comment Form

 *

 *

 

*

 *

关于我

JerryQu,当前从事前端开发,@中国北京
这里是我随便记录东西的地方~
需要找我,我的联系方式在这里»
查找QGYWebIM相关信息,请点这里»

  • PPanda sftp如何同步本地文件夹呢?
  • dron 嗯!太有用了,终于完美找回 EditPlus 的感觉了。
  • 袁源 还真的是这样。其实挺佩服微软的呀~就是都太不完善了
  • 三水清 类似功能可以使用fiddler,http://ming.sinaapp.com/?p=218
  • 呆呆 非常感谢~话说我现在想把weinre变成一个服务器,就是我在电脑上修改了,手机上访问可以直接,不知道[...]
  • 困扰了我好几天的问题,不过最后还是让我解决了,要早让我看见这个文章该多好啊,那我也不用烦恼那么久了~[...]
  • hoowolf 非常感谢你的工作!!!
  • welefen 恩,去年我们在新首页导航精准下线的时候也遇到过,当时还做了对用户影响的数据评估和分析。
  • 唠叨下 我们这边测试的时候是在刚做完 preload 后的系统上测试的,就跟刚装完操作系统后一样干净。怎么说[...]
  • gust 我是在ubuntu11.10环境下
  • gust 想用google浏览器的话可以这样 webbrowser.get('/usr/bin/google[...]
  • jin 怎么zenCoding的缩写设置呢,类似editplus下的acp配置
  • Jerry Qu @Feather,确实Shadow是基于Weinre封装的。在我这里也很慢,因为它连的是http:/[...]
  • Feather 谢谢分享,其实Adobe的Shadow产品貌似也是用这个原理来做的,不过shadow封装好,比较方便[...]
  • i am bug 感谢屈屈!