对Blogger的编辑器有所不满?那就增强它!

ubiquity窗口

其实我对Blogger的编辑器一直有很大的不满,连缩进h1~h6这样的功能都没有,同是Google的产品,KnolGoogle Sites等就好多了,官方却又迟迟不肯升级,天知道那帮人在想什么。更糟糕的是,因为的关系,离线编辑器都用不了,只能继续用这么一个编辑器……

既然如此,我也只好想办法加强它好了,可惜无敌的Greasemonkey没有相关的脚本,我自己又不会编,于是我就想到了相对简单的Ubiquity


说明


1.运行原理


首先建议你先安装Ubiquity试用看看再看此文,很多地方对于不了解的人很难表达清楚,还有初次使用时不妨看看Ubiquity选项里的第一页,那里有一些教程。尤其是Beta版的相当不错,而且有中文

比较麻烦的是Ubiquity有一个缺点:无法处理过多的文字。 但也没关系,输入完命令你的光标是处于那个HTML标记内的,继续打字也按那个标记处理。

举个例子,你需要对一段进行缩进时,先输入一小句,接着运行命令,然后继续写即可,你会发现这一段都是经过缩进的,即使是用回车换行也一样,除非你把光标移到别处。

老实说,这种方法的效率还是不高,不过总比用输入法的自定义词汇什么的之类好多了。

2.编写代码


具体写哪些代码这里暂时不提,这里只说如何自己增加命令

其实这真的很简单,进入Ubiquity选项,选择Hack Ubiquity,然后在输入框里写即可。写完后代码会无需任何设置便自动生效,你也可以选择保存到文件,方便管理。

最后这里说明一下,我没有看过编写教材,只是模仿已有的命令进行一些修改而已,因此有很多不完善的地方,如果你有更好的方案,欢迎补充。

代码


编辑文章用的命令都是用类似下面的代码:

CmdUtils.CreateCommand({
  names: ["命令名称"],
  description: (
    '描述文字'),
  icon: "图标地址",
  execute: function () {
    var win = context.focusedWindow;
    var doc = win.document;
    var sel = win.getSelection();
    for (var i = sel.rangeCount; i--;) {
      var range = sel.getRangeAt(i);
      var newNode = doc.createElement("HTML标记");
      var {style} = newNode;
      style.属性 = "";
      range.surroundContents(newNode);
    }
  }
});

这里要改的东西比较多,下面以我编写的“缩进”为例,逐一进行说明。

命令名称:正如字面的意思那样,你输入命令时也是根据这个进行搜索的。你还可以写多个,比如我就写了 "Indent","缩进",这样一来无论是输入indent还是缩进都能使用此命令。

描述文字:我写了文章缩进,其结果请看最上方的示例图。

图标地址:加入一个图标可以方便区分。

HTML标记:这里不需要“<”或者“>”,比如我的缩进就写div

属性:这两个都是与CSS有关的,像我的缩进就是“style.margin = "0 0 0 30px";”。不过连字符“-”似乎不可用,因此我只好以这种方式代替。

最后,就是这个样子:

CmdUtils.CreateCommand({
names: ["Indent","缩进"],
  description: ('文章缩进'),
  icon: "",
  execute: function () {
    var win = context.focusedWindow;
    var doc = win.document;
    var sel = win.getSelection();
    for (var i = sel.rangeCount; i--;) {
      var range = sel.getRangeAt(i);
      var newNode = doc.createElement("div");
      var {style} = newNode;
      style.margin = "0 0 0 30px";
      range.surroundContents(newNode);
    }
  }
});


接着把上面的代码复制到Hack Ubiquity那里就可以使用了,需要使用其他标记的话,也只需替换上面彩色的文字即可,例如把Indent改为headline1文章缩进改为headline1大标题,div改为h1下划线的那一行去掉就变成给标题添加<h1>了。



暂时就这样了,写得很不完整,欢迎各位来补充提问

4 comments now

  1. 唉,真的不错啊,而且这个工具看起来挺好看的!

    回复删除
  2. 看得头晕,急需简易的编辑器~~~~~~

    回复删除
  3. @小天:
    嗯,本文确实有很多交代不明的地方,等会我去修改
    其实我也想利用Greasemonkey做个简单易用的,可惜能力有限啊.....

    回复删除
  4. @马晨:
    嗯,而且还可以用CSS定制外观

    回复删除