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

2011 九月 28

by 荒野无灯

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

秀一下我的quicktags:

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

网上很多教程都是讲通过修改上面那个Js文件来实现的，这样做的话，当升级时就麻烦了。因此还是采用扩展的办法比较方便。
本文主要参考scribu的文章，scribu是WP 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_<'
,'<'
,'<'
,''
,''
,-1
);

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

edButtons[edButtons.length] = new edButton('ed_pre'
,'pre'
,"<pre>\n"
,"\n</pre>"
,''
);

edButtons[edButtons.length] = new edButton('ed_pre_smooth'
,'pre.sm'
,"<pre class='smooth'>\n"
,"\n</pre>"
,''
);

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

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

edButtons[edButtons.length] = new edButton('ed_hr'
,'hr'
,"\n<hr />\n"
,''
,''
,-1
);

edButtons[edButtons.length] = new edButton('ed_h1'
,'h1'
,"\n<h1>"
,'</h1>'
,''
);

edButtons[edButtons.length] = new edButton('ed_h2'
,'h2'
,"\n<h2>"
,'</h2>'
,''
);

edButtons[edButtons.length] = new edButton('ed_h3'
,'h3'
,"\n<h3>"
,'</h3>'
,''
);

将以上内容写入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