其实我对Blogger的编辑器一直有很大的不满,连缩进,h1~h6这样的功能都没有,同是Google的产品,Knol,Google Sites等就好多了,官方却又迟迟不肯升级,天知道那帮人在想什么。更糟糕的是,因为墙的关系,离线编辑器都用不了,只能继续用这么一个编辑器……
既然如此,我也只好想办法加强它好了,可惜无敌的Greasemonkey没有相关的脚本,我自己又不会编,于是我就想到了相对简单的Ubiquity。
说明
1.运行原理
首先建议你先安装Ubiquity试用看看再看此文,很多地方对于不了解的人很难表达清楚,还有初次使用时不妨看看Ubiquity的选项里的第一页,那里有一些教程。尤其是Beta版的相当不错,而且有中文。
比较麻烦的是Ubiquity有一个缺点:无法处理过多的文字。 但也没关系,输入完命令你的光标是处于那个HTML标记内的,继续打字也按那个标记处理。
举个例子,你需要对一段进行缩进时,先输入一小句,接着运行命令,然后继续写即可,你会发现这一段都是经过缩进的,即使是用回车换行也一样,除非你把光标移到别处。
老实说,这种方法的效率还是不高,不过总比用输入法的自定义词汇什么的之类好多了。
比较麻烦的是Ubiquity有一个缺点:无法处理过多的文字。 但也没关系,输入完命令你的光标是处于那个HTML标记内的,继续打字也按那个标记处理。
举个例子,你需要对一段进行缩进时,先输入一小句,接着运行命令,然后继续写即可,你会发现这一段都是经过缩进的,即使是用回车换行也一样,除非你把光标移到别处。
老实说,这种方法的效率还是不高,不过总比用输入法的自定义词汇什么的之类好多了。
2.编写代码
具体写哪些代码这里暂时不提,这里只说如何自己增加命令。
其实这真的很简单,进入Ubiquity的选项,选择Hack Ubiquity,然后在输入框里写即可。写完后代码会无需任何设置便自动生效,你也可以选择保存到文件,方便管理。
最后这里说明一下,我没有看过编写教材,只是模仿已有的命令进行一些修改而已,因此有很多不完善的地方,如果你有更好的方案,欢迎补充。
其实这真的很简单,进入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>了。
暂时就这样了,写得很不完整,欢迎各位来补充和提问。
唉,真的不错啊,而且这个工具看起来挺好看的!
回复删除看得头晕,急需简易的编辑器~~~~~~
回复删除@小天:
回复删除嗯,本文确实有很多交代不明的地方,等会我去修改
其实我也想利用Greasemonkey做个简单易用的,可惜能力有限啊.....
@马晨:
回复删除嗯,而且还可以用CSS定制外观