Hello World
Spiga

将Windows Live Writer打造为“所见即所得”编辑器

2009-08-18 00:14 by 老赵, 5474 visits

前言

Windows Live Writer(下称WLW)是博客写作利器,自从它发布之后,我几乎再也不使用博客园的在线编辑器写博客了。WLW的最大优势之一,便是可以自动获取目标博客的样式,然后让用户在特定的样式环境下编写文章。不过平心而论,WLW的“自动获取样式”功能并不怎么实用,因为在很多时候它都无法正确地获取到适合编辑的样式。这并不是WLW的错,因为不同网页的样式各有不同,我们有时候很难单独“取出”页面的一部分,同时保持着良好的样式——甚至有些样式还会牵涉到JavaScript。事实上,您目前看到的博客样式便无法由WLW自动得到,但是经过一定“手工打造”,我们还是可以在一个良好的样式环境中编写博客的。例如,以下便是我编写博客时的状态:

它和您目前所看到样式是不是几乎一模一样?

事实上,我最近才忽然意识到,我们其实可以将其作为一个“HTML编辑器”,而不是一个“博客编辑器”使用。也就是说,我们可以利用它在特定样式环境下编写HTML内容。由于WLW已经具备了比较常用的功能,且生成出来的HTML代码非常干净,因此它的还是一个比较合适的HTML编辑器。事实上,我正打算以后就用WLW为InfoQ中文站写稿。因此目前这篇文章将会提供一个指南,希望可以帮助您打造一个合适的编辑环境。

补充一点:在这篇文章中,我们会多次提及“所见即所得”编辑方式,它在这里表示了“带有丰富样式”的编辑方式,而不是指最基础的编辑功能。

为InfoQ中文站打造合适的编辑器

首先,您需要下载并安装Windows Live Writer。在进行下一步之前,最好再创建一个博客。因为我并没有在“全新”的环境下进行过尝试,因此严格来说,我无法百分之一百保证全新环境下进行操作不会出现问题。

完成了第一步之后,您可以点此下载一个补丁包,您会发现其中包含两个文件:

  • InfoQ-Edit.reg注册表文件
  • BlogTemplates目录

然后,依次进行以下几个步骤:

  1. 打开注册表编辑器(regedit.exe),备份HKEY_CURRENT_USER\Software\Microsoft\Windows Live\Writer\Weblogs节点下的内容。
  2. 将InfoQ-Edit.reg文件中的内容倒入注册表。
  3. 将BlogTemplates目录复制到C:\Users\%your_account%\AppData\Roaming\Windows Live Writer中去(可能会随着您的系统有所不同,请注意AppData可能是隐藏文件夹)。如果已经存在了BlogTemplates目录,直接覆盖即可。

打开Windows Live Writer,您会发现目前处在一个名为“InfoQ中文站”的博客中(如果没有,请在Blogs菜单中选择“InfoQ中文站”),但还是处于普通编辑模式下。现在,请选择View菜单下的Edit using theme选项(或使用Ctrl + F11),稍等片刻(正在下载样式文件),大公告成!如果没有意外的话,效果应该是这样的:

尝试着修改标题和内容吧。自然,您是无法发布文章的,您可以将编辑模式切换至HTML,并将这些HTML复制到线上的编辑器里再发布。

接下来,我们就来进行一些简单分析。希望分析过后,您可以自由地将WLW打造成自己想要的样子——至少可以自定义编辑模板吧。另外,如果您在以上那些操作之后没有得到预期效果,也可以检查一下到底出了什么问题。

注册表信息

很明显,WLW是由注册表配合文件进行定制的,我们先从注册表这边入手。简单地说,注册表保存了您在WLW中定义的帐户信息。

InfoQ-Edit.reg文件向注册表内倒入多个数据。首先,它在HKCU\Software\Microsoft\Windows Live\Writer\Weblogs节点下定义了一个名为DefaultWeblog的字符串值,其中包含了默认帐户的GUID。默认帐户即您打开WLW之后所在的博客帐户。每个博客帐户都会在Weblogs节点下出现一个新的节点,节点的名称便是这个帐户的GUID。因此,我们下面关注的便是Weblogs节点下的db500b71-6eda-40d1-a6e3-9c196c68225f节点,它便表示了刚导入的“InfoQ中文站”这个帐户。

在这里我们也不会关注这个节点下的太多内容,您可以自行进行分析,大部分的数据我想还是比较容易猜到是什么作用的。因此,现在请将注意力放在EditorTemplate节点中,其中包含三个值:

  • DisplayWebLayoutWarning:1则表示在切换到“所见即所得”编辑方式时是否出现警告文字。我已经将其设为0,即不进行提示。
  • EditUsingStyles:1则表示使用“所见即所得”进行编辑,它反映的便是WLW菜单View中Edit using theme的状态。
  • LastEditView:表示上次关闭博客帐号时所处的状态,如Normal表示“普通编辑方式”,WebLayout则表示“所见即所得”编辑方式。

EditorTemplate节点还包含了子节点,其中包含两个值:

  • Framed:处于“所见即所得”编辑状态时所使用的模板文件名(目前是Edit.htm)。
  • Webpage:处于Preview状态时所使用的模板文件名(目前是Preview.htm)。

Framed和Webpage的区别在于,前者可能只提供了一个“编辑区”样式(如第一张图片中,我使用的博客编辑样式),而后者用于预览编辑效果,因此则可能是个完整页面。不过在您刚才安装的补丁中,您会发现Edit.htm和Preview.htm的内容完全相同。所以您会发现,即时是在编辑的时候,我们也可以看到InfoQ页面上几乎完整的内容。

模板内容

在注册表中定义的只是模板的“文件名”,而真正的模板是存放在硬盘上的。没错,就是在C:\Users\%your_account%\AppData\Roaming\Windows Live Writer\BlogTemplates中(可能随着系统有所不同),其中应该已经包含了用博客帐户的GUID为名称的文件夹。进入,您就会发现Edit.htm和Preview.htm两个文件。

这两个文件其实都是普通的文件夹,只不过包含了两个站位符{post-title}和{post-body},作用不言自明。如之前所说那样,Edit.htm可能只包含了简单的输入区域,因此对于我的博客其中就包含了这样的代码:

<div id="container">
    <div id="wrapper">
        <div id="content">
            <div id="post" class="post">
                <h2>{post-title}</h2>
                <div class="entry">{post-body}</div>
            </div>
        </div>
    </div>
</div>

那么样式呢?与普通网页一样,样式是也是通过模板文件中的<link />节点引入,或直接写在HTML的<style />节点中的。至于引入的CSS文件的位置,可以是远端,也可以是本地。不过如果您选择引入本地的CSS,则需要提供一个绝对路径,例如:

<link rel="stylesheet" type="text/css" href="file:///C:/Users/.../common.css" />

不过在目前的InfoQ的模板中,我在页面上直接引入了在线的CSS。因此,在切换至“所见即所得”编辑模式时可能需要等待一段时间,此时WLW正在下载CSS文件。如果您需要提高访问速度,则不妨将所有的CSS文件下载至本地,再修改Edit.htm中<link />节点中引入的地址即可。

总结

还有什么需要总结的呢?把工具进行合适的定制可以大幅提高我们的工作效率。例如,现在我们可以直接在写文章时看到样式(包括代码,图片浮动等等),而不用发表为“草稿”再去页面上浏览了,对于我这种博客样式的完美主义者非常有帮助。

再说,定制工具难道不也是程序员的乐趣之一吗?

Creative Commons License

本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名赵劼(包含链接),具体操作方式可参考此处。如您有任何疑问或者授权方面的协商,请给我留言

Add your comment

46 条回复

  1. .easycode[未注册用户]
    *.*.*.*
    链接

    .easycode[未注册用户] 2009-08-18 00:25:00

    我也抢个沙发 哈哈

  2. 老赵
    admin
    链接

    老赵 2009-08-18 00:27:00

    @.easycode
    不知道明天早上醒来会被赶到第几排去。
    首页位置直接涉及到曝光率,在博客园混还需要运气啊。

  3. 飞林沙
    *.*.*.*
    链接

    飞林沙 2009-08-18 00:53:00

    大晚上见到了老赵的文章,我就是占个位问老赵个问题,与本文无关,您觉得云计算发展到一定程度之后,与最早的终端-服务器模式的区别何在?

  4. 老赵
    admin
    链接

    老赵 2009-08-18 01:04:00

    @飞林沙
    我不懂。

  5. 陶发辉
    *.*.*.*
    链接

    陶发辉 2009-08-18 08:44:00

    老赵就是老赵,把Windows live writer都整得这么牛X,我太崇拜你了!

  6. Yoshow
    *.*.*.*
    链接

    Yoshow 2009-08-18 08:58:00

    果然是介于牛A和牛C之间的人啊, 太强.

  7. 老翁
    *.*.*.*
    链接

    老翁 2009-08-18 09:01:00

    WLW相当好用,做的图片效果也很好。

  8. AlphaWu
    *.*.*.*
    链接

    AlphaWu 2009-08-18 09:08:00

    不错!
    老赵的博客怎么没有收藏链接?

  9. qinghao
    *.*.*.*
    链接

    qinghao 2009-08-18 09:08:00

    这样干了不是和在线的一样的慢了?

  10. Dev BBS[未注册用户]
    *.*.*.*
    链接

    Dev BBS[未注册用户] 2009-08-18 09:09:00

    很好!
    收藏了.

  11. redmoon
    *.*.*.*
    链接

    redmoon 2009-08-18 09:10:00

    佩服老赵的动手能力和深入研究。我就是喜欢想点子,不去动手。

  12. peterzb
    *.*.*.*
    链接

    peterzb 2009-08-18 09:16:00

    牛, 把工具玩到如此地步了

  13. Franz
    *.*.*.*
    链接

    Franz 2009-08-18 09:21:00

    主要写给InfoQ中文编辑看的啊.嘻嘻.

  14. 老赵
    admin
    链接

    老赵 2009-08-18 09:29:00

    qinghao:这样干了不是和在线的一样的慢了?


    如果网络状况不佳(如昨天),打开时的确会有所迟钝(打开以后就好了)。
    如果这是一个大问题,就可以把模板里的css下载到本地,在模板里加载本地文件,就无比迅速了。

  15. 老赵
    admin
    链接

    老赵 2009-08-18 09:30:00

    Franz:主要写给InfoQ中文编辑看的啊.嘻嘻.


    被你看出来了啊,顺便推荐InfoQ,增加InfoQ曝光率。

  16. 老赵
    admin
    链接

    老赵 2009-08-18 09:30:00

    AlphaWu:
    不错!
    老赵的博客怎么没有收藏链接?


    右上角有个大大的RSS图标,欢迎订阅。

  17. James.Ying
    *.*.*.*
    链接

    James.Ying 2009-08-18 09:45:00

    C:\Program Files\Windows Live\Writer\template\defaultstyle.css

    这个。。。。。我改的是这个文件

  18. 老赵
    admin
    链接

    老赵 2009-08-18 09:50:00

    @James.Ying
    这是“普通编辑模式”下使用的模板,全局的,最好不要去动它。
    我的文章修改的是单个博客的风格样式。
    在某些情况下,样式太丰富也会影响编辑,所以还是会切换回普通模式。
    所以如果普通模式太花哨就失去意义了……

  19. James.Ying
    *.*.*.*
    链接

    James.Ying 2009-08-18 10:10:00

    哈,明白了

  20. Gnie
    *.*.*.*
    链接

    Gnie 2009-08-18 10:21:00

    厉害,哈哈!

  21. sesh
    *.*.*.*
    链接

    sesh 2009-08-18 10:45:00

    haha,一直将WLW沉睡在电脑里,看了老赵的文章,就行动手试试看了

  22. 温景良(Jason)
    *.*.*.*
    链接

    温景良(Jason) 2009-08-18 11:53:00

    看到老赵的文章,如醍醐灌顶

  23. 鹤冲天
    *.*.*.*
    链接

    鹤冲天 2009-08-18 12:20:00

    看了本文,了解一个软件,也知道了一个新网站!支持老赵!

  24. hans.hu
    *.*.*.*
    链接

    hans.hu 2009-08-18 12:59:00

    学习了.

  25. 王丰
    *.*.*.*
    链接

    王丰 2009-08-18 13:54:00

    老赵应该是山东人吧,有点耿直,豪爽

  26. 老赵
    admin
    链接

    老赵 2009-08-18 13:57:00

    @王丰
    兄弟我是生在上海长在上海的上海人……

  27. Y.Jiajia[未注册用户]
    *.*.*.*
    链接

    Y.Jiajia[未注册用户] 2009-08-18 14:47:00

    真帅,牛人一个!!!这样也能改装。

  28. Jaxu
    *.*.*.*
    链接

    Jaxu 2009-08-18 15:16:00

    佩服老赵,一直以来都想改造Windows Live Writer,今天终于看到前辈们努力的成果了。

  29. DiryBoy
    *.*.*.*
    链接

    DiryBoy 2009-08-18 16:46:00

    其实大部分工作可以通过这里设置:


    按了这按钮后, %appdata% 下面就会找到lz说的那些文件,随便编辑吧!

  30. 老赵
    admin
    链接

    老赵 2009-08-18 16:48:00

    @DiryBoy
    说的没错,不过这个按钮是用来自动更新的,很多时候还是需要手动编辑。
    我的方法主要是为了一个东西,就是“无中生有”地创建一个博客帐号。
    用WLW的向导来创建的话,如果没有一个真正可用的API是创建不出来的。
    还有一点就是,如果你创建了n个博客帐号,要知道它的GUID还得去看注册表。

  31. DiryBoy
    *.*.*.*
    链接

    DiryBoy 2009-08-18 16:54:00

    @Jeffrey Zhao
    按这个后WLW会发一篇临时日志,然后将东西下载下来,可以看看 index[1].htm (或者体积最大那个)的内容就知道是哪个账号了。

  32. 老赵
    admin
    链接

    老赵 2009-08-18 17:01:00

    @DiryBoy
    也可以,不过我建议去找“最近更新”的那个比较好,呵呵。

  33. DiryBoy
    *.*.*.*
    链接

    DiryBoy 2009-08-18 17:02:00

    超时...

    Jeffrey Zhao:
    用WLW的向导来创建的话,如果没有一个真正可用的API是创建不出来的。


    真正的用处就在这里了,哈哈!

  34. DiryBoy
    *.*.*.*
    链接

    DiryBoy 2009-08-18 17:05:00

    Jeffrey Zhao:
    @DiryBoy
    也可以,不过我建议去找“最近更新”的那个比较好,呵呵。


    没错,这个更快

  35. Jeffrey Sun
    *.*.*.*
    链接

    Jeffrey Sun 2009-08-18 17:49:00

    老赵最近产量很高啊, 有点福楼拜的意思

  36. 老赵
    admin
    链接

    老赵 2009-08-18 17:53:00

    @Jeffrey Sun
    兄弟你太抬举我了。

  37. CoolCode
    *.*.*.*
    链接

    CoolCode 2009-08-18 21:27:00

    我也是用WLW,但是没有文章摘要的,不知道你是如何弄上去的呢?

  38. 老赵
    admin
    链接

    老赵 2009-08-18 21:59:00

    @CoolCode
    每次都只是发布为草稿,最后一步在博客园做,包括分类,摘要,tag,URL……

  39. Kevin  Yang[未注册用户]
    *.*.*.*
    链接

    Kevin Yang[未注册用户] 2009-08-19 10:14:00

    我自己的博客用wordpress搭建的,编辑器中的样式基本和最后出来的样式一摸一样。
    至于在edit的时候显示和预览一样的效果,我觉得可能不同人不同感觉吧,对于我来说可能不是那么实用,用久就会腻了
    我很是同意你那句话“定制工具难道不也是程序员的乐趣之一”

  40. 傻样精英
    *.*.*.*
    链接

    傻样精英 2009-08-19 20:04:00

    你的那个插入代码高亮工具也是wlw的插件吗?
    叫啥名字啊

  41. 老赵
    admin
    链接

    老赵 2009-08-19 20:36:00

    @傻样精英
    好像叫Paste from Visual Studio.

  42. cnhzlt
    *.*.*.*
    链接

    cnhzlt 2009-08-20 19:21:00

    相当不错

  43. 傻样精英
    *.*.*.*
    链接

    傻样精英 2009-08-22 10:10:00

    @Jeffrey Zhao
    收到,谢谢

  44. 占奇博客[未注册用户]
    *.*.*.*
    链接

    占奇博客[未注册用户] 2009-09-07 23:46:00

    WordPress下一直预览失败。

  45. 老赵
    admin
    链接

    老赵 2009-09-07 23:49:00

    @占奇博客
    这时候就需要手动修改模板了。

  46. 鹤冲天
    *.*.*.*
    链接

    鹤冲天 2009-09-12 08:11:00

    今天也开始用了,真方便!谢谢老赵!

发表回复

登录 / 登录并记住我 ,登陆后便可删除或修改已发表的评论 (请注意保留评论内容)

昵称:(必填)

邮箱:(必填,仅用于Gavatar

主页:(可选)

评论内容(大于5个字符):

  1. Your Name yyyy-MM-dd HH:mm:ss

使用Live Messenger联系我