给WordPress quicktags编辑器添加自定义按钮的正确方法

不得不说,Quicktags是一个绝好的编辑器,纯JS实现,扩展方便。自07年以来,我一直用的是quicktags,WP后台的tinyMCE几乎没有使用过。
喜欢它的简洁。

秀一下我的quicktags:

WP 2.0以后的版本中它都在 /wp-includes/js/quicktags.js 


网上很多教程都是讲通过修改上面那个Js文件来实现的,这样做的话,当升级时就麻烦了。因此还是采用扩展的办法比较方便。
本文主要参考scribu的文章,scribuWP Core contributor and plugin author,写了很多优秀的插件,如:WP-UserOnline、WP-PageNavi等。


在quicktags.js文件中,你可以看到这个edButton函数,,它总共有6个参数:

1
2
3
4
5
6
7
8
function edButton(id, display, tagStart, tagEnd, access, open) {
this.id = id;     // 用于唯一标识一个按钮
this.display = display;    // 按钮的label
this.tagStart = tagStart;    // 开始标记
this.tagEnd = tagEnd;    // 结束标记
this.access = access;    // access key
this.open = open;    // 如果按钮没有结束标记,把它置为 -1
}

例如,我们要增加一个<标记,可以这样做:

1
2
3
4
5
6
7
edButtons[edButtons.length] = new edButton('ed_<'
,'<'
,'&lt;'
,''
,''
,-1
);

这是我另外增加的几个常用的按钮:

1
2
3
4
            edButtons[edButtons.length] = new edButton('ed_pre'
        ,'pre'
        ,"<pre>\n"
        ,"\n

"
,''
);

edButtons[edButtons.length] = new edButton('ed_pre_smooth'
,'pre.sm'
,"

1
2
\n"
        ,"\n

"
,''
);

edButtons[edButtons.length] = new edButton('ed_<'
,'<'
,'<'
,''
,''
,-1
);

edButtons[edButtons.length] = new edButton('ed_>'
,'>'
,'>'
,''
,''
,-1
);

edButtons[edButtons.length] = new edButton('ed_hr'
,'hr'
,"\n


\n"
,''
,''
,-1
);

edButtons[edButtons.length] = new edButton('ed_h1'
,'h1'
,"\n

"
,'

'
,''
);

edButtons[edButtons.length] = new edButton('ed_h2'
,'h2'
,"\n

"
,'

'
,''
);

edButtons[edButtons.length] = new edButton('ed_h3'
,'h3'
,"\n

"
,'

'
,''
);

将以上内容写入my-custom-quicktags.js文件并保存在主题includes/目录下面,然后在主题functions.php中引入:

1
2
3
4
5
6
7
8
add_action('admin_print_scripts', 'my_custom_quicktags');
function my_custom_quicktags() {
    wp_enqueue_script(
        'my_custom_quicktags',
        get_stylesheet_directory_uri().'/includes/my-custom-quicktags.js',
        array('quicktags')
    );
    }

参考文档:
http://tamba2.org.uk/wordpress/quicktags/

http://scribu.net/wordpress/right-way-to-add-custom-quicktags.html

http://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri

http://codex.wordpress.org/Function_Reference#Theme-Related_Functions

更多
7 Responses Post a comment
  1. 艳文

    学习一下先 最近都在看wordpress和drupal 想看下两者的异同

  2. Demon

    这个得收藏。最近在折腾这个。

  3. whisperer

    很强大,js也好大...我也用过,不过到我的访客基本不用,于是去掉了。

  4. 阿疯

    这个绝对要保留哈。
    之前一直都没看懂那段代码,只能照着之前的修改的

Leave a Reply

Note: You may use basic HTML in your comments. Your email address will not be published.

Subscribe to this comment feed via RSS