填写您的邮件地址,订阅我们的精彩内容:

WordPress编辑器HTML模式界面中添加按钮

705

将近半个月没有更新博客了,熟悉的朋友们可能都已经等得花儿谢了。这段时间重新为乌徒帮制作了主题,改头换面,现在重新开始更新。本文将实现为wordpress编辑器的HTML模式界面添加新的功能按钮。

我们可以在网络上轻易的找到丰富wordpress后台编辑器的相关文章,然而要对HTML编辑模式下的快捷按钮进行补充却并非易事,通过谷歌搜索,没有找到能解决这一问题的资料,不过一些文章中已经完成了对早期wordpress这一功能的实现,顺藤摸瓜之下,否子戈也实现了wordpress3.4之后的WordPress编辑器HTML模式界面中添加按钮,本文以添加<pre>为例讲解这一功能的实现。

产生要增加<pre>快捷按钮的原因是想增加后台写代码的功能。经常使用wordpress的朋友会发现,wordpress默认的编辑器不会保留我们在本地文本中输入的tab和空格,这些信息会被过滤掉,我之前一直使用b-quote按钮来把代码放在一个小区域内,但是代码会全部左对齐,让读者很难阅读,因此需要用<pre>将这些代码预格式化包装起来,保留代码的换行缩进,这样就可以让读者按照我们对代码的阅读习惯阅读代码了。不过这种缩进也只有在HTML编辑模式下使用,可视化模式下这些缩进会被丢弃。

经过搜索,找到了两篇关于在wordpress编辑器HTML界面下增加按钮的方法的文章,然而经过测试均告失败。这些文章中提到,修改/wp-includes/js/quicktags.js文件,在edButtons[edButtons.length]=new edButton后面添加与之类似的条目。由于wordpress本身的升级,这些老的文章中的方法已经不可用,因为quicktags.js已经发生了变化。不过这也是一条线索,让我明白了:1、wordpress编辑器HTML模式下的这些按钮只能通过修改于quicktags.js相关的脚本来实现,而不能像可视化模式下的按钮一样通过php增加挂钩代码;2、要实现添加&lt;pre&gt;按钮,必须了解quicktags.js及按钮的实现。

虽然quicktags.js经过升级发生了变化,但一些重要的单词没有变,通过对那些老文章的阅读,我很快在quicktags.js最后部分找到了相应的代码:

edButtons[10]=new c.TagButton(“strong”,”b”,”<strong>”,”</strong>”,”b”);edButtons[20]=new c.TagButton(“em”,”i”,”<em>”,”</em>”,”i”),edButtons[30]=new c.LinkButton(),edButtons[40]=new c.TagButton(“block”,”b-quote”,”nn<blockquote>”,”</blockquote>nn”,”q”),edButtons[50]=new c.TagButton(“del”,”del”,'<del datetime=”‘+a+'”>’,”</del>”,”d”),edButtons[60]=new c.TagButton(“ins”,”ins”,'<ins datetime=”‘+a+'”>’,”</ins>”,”s”),edButtons[70]=new c.ImgButton(),edButtons[80]=new c.TagButton(“ul”,”ul”,”<ul>n”,”</ul>nn”,”u”),edButtons[90]=new c.TagButton(“ol”,”ol”,”<ol>n”,”</ol>nn”,”o”),edButtons[100]=new c.TagButton(“li”,”li”,”t<li>”,”</li>n”,”l”),edButtons[110]=new c.TagButton(“code”,”code”,”<code>”,”</code>”,”c”),edButtons[120]=new c.TagButton(“more”,”more”,”<!–more–>”,””,”t”),edButtons[130]=new c.SpellButton(),edButtons[140]=new c.CloseButton()

由于quicktags.js经过压缩,因此这些代码是粘在一块儿的。认真阅读不难发现,一个按钮的基本语句是:

edButtons[10]=new c.TagButton("strong","b","<strong>","</strong>","b");

edButtons的索引下标决定了这个按钮的位置。 TagButton第一个参数是代表的意思,应该是注册这个button的ID之类,第二个参数是在编辑器中的按钮上显示什么文章,第三个参数是点击这个按钮第一次打印的内容(开标签),第四个参数是再次点击按钮时打印的内容(闭标签),最后一个参数不明,应该也是一个标识。当第四个参数为空时,没有标签的开闭效果,如wordpress自身的<!– more –>就是这样的。

那么我们的<pre>标签应该怎么实现呢?

edButtons[121]=new c.TagButton("pre","pre","<pre>","</pre>","p"),

看上去很简单吧,至于把它放在什么地方,我想你应该可以猜得到,黏贴在edButtons[120]=new c.TagButton(“more”,”more”,”<!–more–>;”,””,”t”),之后就好了。

好啦,大功告成!等等,就这么完了?等到下次wordpress再升级的时候,被覆盖了怎么办?好吧,再想想办法,把它融合到主题里或做一个插件吧。做插件?算了吧,还是做到主题中。又是一番对wordpress内部机理的思考。能不能直接把上面这一小段实现的代码放在主题中,用一个钩子把它勾进wordpress进程中去呢?我想到了直接在网页源码中增加一条script语句,于是做了如下尝试:

/**
 * 作者:否子戈
 * 作者主页:http://www.utubon.com
 **/
// 下面的代码可以增加HTML模式下的按钮
if(is_admin() && end(explode('/',$_SERVER['PHP_SELF'])) == 'post.php'):
function add_html_shortcode(){
?>
<script>
edButtons[121]=new QTags.TagButton('pre','pre','<pre lang="php" line="1">','</pre>','p');
edButtons[122]=new QTags.TagButton('h3','h3','<h3>','</h3>','h');
edButtons[60]=new QTags.TagButton('hr','hr',"nn<hr />nn",'','hr');
edButtons[124]=new QTags.TagButton('tab','TAB',"t",'','tab');
edButtons[125]=new QTags.TagButton('ad','Adsense','[adsense]','','ad');
</script>
<?php
}
add_action('admin_print_footer_scripts','add_html_shortcode');
endif;

将上面这段代码放在functions.php的最后,即可实现在后台编辑器HTML模式下增加一个pre按钮。

不过经测试,即使pre按钮功能已经实现,然而我所希望的插入代码的功能仍然没有实现,因为wordpress编辑器仍然会过滤代码,例如我要插入一段javascript代码,如果带上了<script>标签,回到可视化模式时,标签内的JS就成了完整的HTML代码而被隐藏起来。

下面我简单说几句