WordPress后台编辑器添加修改删除编辑按钮

本文详细全面的对WordPress后台编辑器HTML模式下的按钮自定义进行详解，以让开发者肆意的修改按钮及其布局。

自定义按钮起效的两种途径

首先我们要做的是了解如何才能让我们自定义的效果可以在后台起效，实现按钮修改。我总结出了两种方法，一种是通过wordpress的wp_enqueue_script来实现，一种是通过在后台钩上第一段代码来实现。

第1种，利用wp_enqueue_script来实现

这种方法需要进行两个步骤，一个是在主题目录下的functions.php中添加下面的代码：

add_action('admin_print_scripts', 'my_custom_quicktags');
function my_custom_quicktags() {
    wp_enqueue_script(
        'my_custom_quicktags',
        plugins_url(basename(dirname(__FILE__)) . "/my-custom-quicktags.js"),
        array('quicktags')
    );
}

第二个是在主题目录下放置一个my-custom-quicktags.js，里面放置一段对脚本的附加代码。当然，这个文件的放置位置也可以修改，这时需要修改上面代码中的plugins_url(basename(dirname(__FILE__)) . "/my-custom-quicktags.js")一句以保证路径正确。在my-custom-quicktags.js中，我们放置对应的添加修改删除按钮功能的脚本。如下：

QTags.addButton( 'printCode', 'printCode', '[mycode]'+"\n", "\n"+'[/mycode]');
//将在现有的按钮最后添加一个新的printCode按钮。具体的方法将在下文讲到。

第2种，通过勾上一段代码，向后台页面中添加一段可以实现功能的代码

这种方法比较笨拙，但更容易被理解，即在后台页面的底部增加了一些代码，这些代码恰好能实现这一效果。代码如下：

// 下面的代码可以增加HTML模式下的按钮
$php_name = end(explode('/',$_SERVER['PHP_SELF']));
if(is_admin() && ($php_name == 'post.php' || $php_name == 'post-new.php')):
function add_html_shortcode(){
?>
<script>
edButtons[60]=new QTags.TagButton('hr','hr',"\n\n<hr />\n\n",'','hr');
edButtons[122]=new QTags.TagButton('h3','h3','<h3>','</h3>','h');
edButtons[123]=new QTags.TagButton('tab','TAB',"\t",'','tab');
edButtons[130] = null;
edButtons[140] = null;
</script>
<?php
}
add_action('admin_print_footer_scripts','add_html_shortcode');
endif;

向后台界面中增加新的按钮

由于wordpress后台编辑器多半是用脚本来实现的，因此我们要做的是通过脚本代码来控制按钮的数量布局和功能。

向后台界面中添加按钮有两个途径，上文中已经介绍了一种，即QTags.addButton('printCode','printCode', '[mycode]', '[/mycode]');，另外还有另外一种增加的方法，即通过在quicktags.js中预留的空间里增加按钮数量。

这两种增加的方法所添加的代码，通过上文所说的两种起效方法都是可以实现的，只要把JS代码放在对应的地方即可。

/wp-includes/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", "\n\n<blockquote>", "</blockquote>\n\n", "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>\n\n", "u"),
edButtons[90] = new c.TagButton("ol", "ol", "<ol>\n", "</ol>\n\n", "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", "<span id="more-410"></span>", "", "t"),
edButtons[130] = new c.SpellButton(),
edButtons[140] = new c.CloseButton();

是通过对edButtons数组的索引来排序的，我们在这些索引中间增加一些即可实现效果。如我们在上文可以起效的JS内添加这样一段代码：

edButtons[122]=new QTags.TagButton('h3','h3','<h3>','</h3>','h');

这样一来即可实现了在[120]more按钮之后增加一个h3按钮。

修改按钮

修改按钮的方法我只找到一种，即如上文所述，直接定义一个新的edButtons，用一个相同的索引覆盖掉原来的按钮。同样以h3按钮为例，增加一段代码：

edButtons[120]=new QTags.TagButton('h3','h3','<h3>','</h3>','h');

即可覆盖掉原来的more按钮，被替换为h3按钮。

你可能要问这个格式是什么。在上面的JS代码中，TagButton('h3','h3','<h3>','</h3>','h')有五个参数，第一个是一个代号，第二个是按钮内要显示的文字，第三个是点击第一下按钮显示的标签，第四个不用说就是点击第二下的关闭标签，如果你要增加的是
标签，第四个参数就不填了，第五个参数好像没什么用，可能是一个代号。

删除按钮

删除按钮的方法非常简单，只是修改按钮的一种特殊情况，即将一个原本有的索引对应的值设置为null即可删除该按钮，如：

edButtons[120]=null;

这样一来，more按钮就不会再出现在按钮一栏中了。

通过上文的讲解，相信你对如何进行后台编辑器的按钮安排已经有了一个非常全面的掌握了。

转自：乌徒帮

博客

WordPress后台编辑器添加修改删除编辑按钮

自定义按钮起效的两种途径

向后台界面中增加新的按钮

修改按钮

删除按钮

相关文章