天涯左岸

为WordPress 3.3.2的编辑器添加自定义按钮

在开始使用Wordpress时,就发现写的文章每个段落之前不能空两格,对于习惯了中文版式的我来说是很苦恼的,后来百度之后发现了解决的方法,即将每个段落都放在<p style=”text-indent:2em”></p>标签之中,并为该p标签添加样式”text-indent:2em”。这样时候无论主题中时候定义了首航缩进都会显示首航缩进的格式,完美解决了Wordpress首行不能缩进的问题。但是另一问题也随之而来,那就是在写每段话的时候都要打上这个标签,十分繁琐,如果可以将这个标签定义成为编辑器上的一个按钮,使用时只需按一下按钮就可以将p标签添加上,那就非常完美了。经过在网上不断的搜索查找和修改试验,终于获得成功。即在/wp-includes/js/目录下修改其中的quicktags.js文件,在其中增加添加按钮的代码。

前些天Wordpress出最新版3.3.2后,笔者也随之升级了Wordpress的版本,在想继续添加编辑器按钮时却发现,quicktags.js文件的内容发生了很大的变化,不能再采用原来的方法进行添加按钮了。于是今天笔者下载了quicktags.js这个文件,仔细研究了一下。经过一番努力之后终于找到了新的添加自定义按钮的方法。

同样还是修改quicktags.js文件,用UltraEdit打开quicktags.js文件,在编辑菜单线选择“切换自动换行”,这样便于查看quicktags.js文件的内容。拖动滚动条到最后,我们可以看到形式如下的代码:

edButtons[110]=new c.TagButton("code","code","<code>","</code>","c"),

笔者就是要在这个地方,按照这个格式来添加自定义的按钮。通过观察笔者发现edButtons[110]后面的[]中的数字是从10开始一直20、30最后加到140,可以推断出这个应该是按钮的顺序索引。笔者想在more按钮后面添加自己的自定义按钮,那么需要知道more按钮的索引序号,通过查看源代码,我们找到了more按钮的代码如下:

edButtons[120]=new c.TagButton("more","more","<!--more-->","","t"),

从中我们可以看到more按钮的索引代码为120,因此笔者自己定义按钮的索引应该为130,但是这样会同后面按钮的索引重复,从而导致错误,没关系,只要将后面按钮的索引依此顺延即可。以下是笔者自己定义的按钮:

edButtons[130]=new c.TagButton("p","p",'<p style="text-indent:2em">',"</p>","p"),
edButtons[140]=new c.TagButton("font","font",'<font style="color:#FF0000; font-size:13px; font-family:Microsoft YaHei">',"</font>","font"),
edButtons[150]=new c.TagButton("lt","<","&lt;","","lt"),
edButtons[160]=new c.TagButton("gt",">","&gt;","","gt"),

笔者总共定义了4个按钮,索引从130-160,那么其后的两个按钮的代码需要更改为170、180,如下所示:

edButtons[170]=new c.SpellButton(),
edButtons[180]=new c.CloseButton(),

笔者自定义按钮的效果如下图所示:

图一    红色标示的为自定义按钮
图一    红色标示的为自定义按钮

发表评论

电子邮件地址不会被公开。 必填项已用*标注