WordPress3.3 自定义编辑器按钮

上一篇说到由于wordpress3.3采用新的编辑器API，导致原来HTML编辑模式所有quicktags自定义按钮全灭，那就来了解一下新的API怎么工作吧。自定义按钮可以在写文章的时候方便插入一些常用的标签或者代码。如下图所示：

打开wordpress主目录/wp-includes/js下的quicktags.dev.js文件，在273行左右就有一整段“Main API function for adding a button to Quicktags”注释了……于是这篇文章就是简单的翻译一下而已。

举例介绍，将代码加入到functions.php中：

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php

//代码开始

add_action( 'admin_print_footer_scripts', 'quicktagsbuttons', 100 );

function quicktagsbuttons() { ?>

    <script type="text/javascript">

        QTags.addButton( 'id_1', '短代码', '[shortcode]','[/shortcode]');

        QTags.addButton( 'id_2', '消息框', my_callback );

        function my_callback(){ alert("我是一个消息框！")}

        QTags.addButton( 'id_3', '分割线', '<hr />');

    </script>

    <?php }

//代码结束

?>

add_action( 'admin_print_footer_scripts', 'quicktagsbuttons', 100 );

//这是要将代码挂载到后台仪表盘。quicktagsbuttons是自定义函数名称

//上一篇介绍了在前台调用编辑器，要在前台自定义按钮则使用wp_footer来加入

//add_action( 'wp_footer', 'quicktagsbuttons', 100 )；

<script type="text/javascript">

    //例一：

    QTags.addButton( 'id_1', '短代码', '[shortcode]','[/shortcode]');

    //“id_1”是按钮代号；“短代码”是按钮名称；

    //“[shortcode]”是按下此按钮后插入的文字

    //“[/shortcode]”是再次按下按钮后插入的文字



    ////例二：

    QTags.addButton( 'id_2', '消息框', my_callback );

    function my_callback(){ alert("我是一个消息框！")}

    //“my_callback”是调用函数，可以实现更高级的用户体验。

    //这里只是按下按钮后弹出一个消息框



    //例三：

    QTags.addButton( 'id_3', '分割线', '<hr />');

    //同例一，QTags.addButton至少需要前3个参数

</script>

差不多就这样，明明很简单的被我写得这么复杂……新版编辑器API极大简化代码，与原来WP3.2下相比，我起码省下了10kb……

PS：大概把下个月的份也一起更新了~