吵吵   2012-04-02  阅读:3,845

wp功能强大是不用说了,但是一直为人诟病的莫过于那个丑陋或者你说简洁也行的编辑器了。wordpress默认的编辑器是叫tiny_mce,是一款轻量级的网页编辑器,使用javascript写的就不用说了,加载速度还是蛮快的。

但是每次看到上面仅仅一行的工具栏就觉得悲剧,一是每次要贴点代码都需要手工输入code标签,二是每次每段文字的前面的两个汉字空格都是我手动复制出来的。

为了解决这两个问题,使得我们的编辑器的效率能够上去,我决定加入一个php按钮,使得我们点击就出现一个php语言的code标签。另外加入一个叫”段首”的按钮,使得我们点击它的时候能够自动的补足两个汉字的空格。

首先我们需要打开wp-include/js/quicktags.js,找到一段代码我们看看是怎么回事,比如说b这个使得文字加粗的按钮:

edButtons[edButtons.length]=new edButton(“ed_strong”,”b”,”“,”“,”b”);

于是我们依样画瓢,加入这两个按钮:

//2011年4月2日加入
edButtons[edButtons.length]=new edButton(“ed_php”,”php”,’','','php');
edButtons[edButtons.length]=new edButton("ed_kongge","段首","    ","","段首");

看看我们的效果图吧:

wordpress

这两个按钮都出来了,而且测试发现都能用,那么这两个问题就解决了,以后编辑起来就方便多了。但是我突然发现上传的图片并不能居中,于是我又加了一个居中的按钮,也就是加入一个p标签了,并将algin属性改为center.

edButtons[edButtons.length]=new edButton("ed_juzhong","居中",'

',"

","居中");

吵吵微信朋友圈,请付款实名加入:

吵吵 吵吵

6条回应:“为wp编辑器添加段首空格按钮和代码按钮”

  1. CO2说道:

    段首空格似乎在css里指定text-indent:2em會比較好一點?

  2. 网赚教程说道:

    还是比较实用的。

  3. xiao说道:

    求购路由器(本部高层公寓)

  4. 大学便民网说道:

    这个方法不错啊 可惜要搞内核 如果是直接修改主题就好了 不然下次更新又没了 这个方法可以很好的扩展 比如查毒div都可以(应该可以吧…)

  5. 很好的方法~学习了“

  6. keke说道:

    但是新增的这两个按钮在可视化编辑器上是看不到的,

发表评论

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