[WP技巧]给HTML编辑器添加自定义按钮

 - by Hector

比起可视化写博客,我更喜欢HTML编辑器,因为HTML编辑器对HTML标签更加可控,速度也更快,只要熟悉了HTML标签,再加上语义化的编辑,可以很快完成一篇文章。对于样式方面,可以参考这篇:给你的文章内容添加自定义样式,这样之后比起可视化编辑器,我相信样式更加统一和美观。

添加方法

1.备份原有文件
首先找到wp-includes文件夹下的js文件夹,找到quicktags.js文件,将此文件备份,比如改为quicktags.js.bak,然后找到quicktags.dev.js,将此文件改为quicktags.js,此文件就是我们待编辑的文档。
2.添加标签
打开quicktags.js文件,定义按钮的地方按照原来的格式添加自己的按钮,下面是我添加的几个常用的按钮,配合自定义的样式,显示效果非常好。

 
/*------------Add by Hector-------------*/

edButtons[edButtons.length] =
new edButton('ed_h2'
,'h2'
,'<h2>'
,'</h2>'
,'h2'
);
edButtons[edButtons.length] =
new edButton('ed_h3'
,'h3'
,'<h3>'
,'</h3>'
,'h3'
);
edButtons[edButtons.length] =
new edButton('ed_h4'
,'h4'
,'<h4>'
,'</h4>'
,'h4'
);
edButtons[edButtons.length] =
new edButton('ed_dls'
,'dls'
,'<dl>\n\t<dt>    </dt>\n\t<dd>   </dd>'
,'\n</dl>'
,'dls'
);

edButtons[edButtons.length] =
new edButton('ed_hs'
,'hs'
,'<h2> </h2>\n<h3>    </h3>\n\n\n<h3>    </h3>\n\n\n<h2> </h2>\n<h3>    </h3>\n\n\n<h3>    </h3>\n\n'
,''
,'hs'
);

/*------------Add End-------------*/
 

Leave a comment