当我们在为WordPress扩展更多功能时，过程简单化我觉得是必不可少的，就如本站的订阅下载功能而言，每次需要插入附件时，都需要手动输入[sdfile url=""]，或者是切换到文本编辑。而添加可视化按钮可以快速解决这个问题。

首先在functions.php中添加

/**
功能说明: 编辑器添加按钮
更新时间：2017-10-06
**/
function lb_tinymce_button() {
	if ( current_user_can( 'edit_posts' ) && current_user_can( 'edit_pages' ) ) {
		add_filter( 'mce_buttons', 'lb_register_tinymce_button' );
		add_filter( 'mce_external_plugins', 'lb_tinymce_button_script' );
	}
}
add_action( 'admin_init', 'lb_tinymce_button' );
function lb_register_tinymce_button( $buttons ) {
	array_push( $buttons, 'down_button' );
	return $buttons;
}
function lb_tinymce_button_script( $plugin_array ) {
	$plugin_array['lb_button_script'] = get_template_directory_uri(). '/app/button.js'; 
	return $plugin_array;
}

注意自己的button.js路径，button.js内容为：

(function() {
  tinymce.create('tinymce.plugins.lbButtons', {
    init: function( editor, url ) {
	//附件插入按钮
	editor.addButton( 'down_button', {
	title: '插入附件',
	image : url+'/down.svg',
	onclick: function() {
	editor.windowManager.open({
	    title: '插入附件',
	    body: [
            {
		type: 'textbox',
		name: 'down',
		label: '附件地址'
	    }
            ],
		onsubmit: function( e ) {
		editor.insertContent( '[sdfile url="' + e.data.down + '"]' );
	    }
	});
	}		
	});
	},
	createControl: function( n, cm ) {
	    return null;
        }
});
tinymce.PluginManager.add( 'lb_button_script', tinymce.plugins.lbButtons );
})();

title为tip提示，image为按钮的图标（url为当前js的路径，所以将图标与js放在一个文件夹即可）。短代码的输出根据自己的要求来修改即可。

接下来就可以在可视化窗口直接点击刚刚添加的按钮。下面说说tinymce的几个文本框属性：

{
                    type   : 'listbox',
                    name   : 'listbox',
                    label  : 'listbox',
                    values : [
                        { text: 'Test1', value: 'test1' },
                        { text: 'Test2', value: 'test2' },
                        { text: 'Test3', value: 'test3' }
                    ],
                    value : 'test2' // Sets the default
                },
                {
                    type   : 'combobox',
                    name   : 'combobox',
                    label  : 'combobox',
                    values : [
                        { text: 'Test', value: 'test' },
                        { text: 'Test2', value: 'test2' }
                    ]
                },
                {
                    type   : 'textbox',
                    name   : 'textbox',
                    label  : 'textbox',
                    tooltip: 'Some nice tooltip to use',
                    value  : 'default value'
                },
                {
                    type   : 'tooltip',
                    name   : 'tooltip',
                    label  : 'tooltip ( you dont use it like this check textbox params )'
                },
                {
                    type   : 'button',
                    name   : 'button',
                    label  : 'button ( i dont know the other params )',
                    text   : 'My Button'
                },
                {
                    type   : 'buttongroup',
                    name   : 'buttongroup',
                    label  : 'buttongroup ( i dont know the other params )',
                    items  : [
                        { text: 'Button 1', value: 'button1' },
                        { text: 'Button 2', value: 'button2' }
                    ]
                },
                {
                    type   : 'checkbox',
                    name   : 'checkbox',
                    label  : 'checkbox ( it doesn`t seem to accept more than 1 )',
                    text   : 'My Checkbox',
                    checked : true
                },
                {
                    type   : 'colorbox',
                    name   : 'colorbox',
                    label  : 'colorbox ( i have no idea how it works )',
                    // text   : '#fff',
                    values : [
                        { text: 'White', value: '#fff' },
                        { text: 'Black', value: '#000' }
                    ]
                },
                {
                    type   : 'panelbutton',
                    name   : 'panelbutton',
                    label  : 'panelbutton ( adds active state class to it,visible only on hover )',
                    text   : 'My Panel Button'
                },
                {
                    type   : 'colorbutton',
                    name   : 'colorbutton',
                    label  : 'colorbutton ( no idea... )',
                    // text   : 'My colorbutton'
                },
                {
                    type   : 'colorpicker',
                    name   : 'colorpicker',
                    label  : 'colorpicker'
                },
                {
                    type   : 'radio',
                    name   : 'radio',
                    label  : 'radio ( defaults to checkbox, or i`m missing something )',
                    text   : 'My Radio Button'
                }

更多的tinymce文档，可以参考官网手册。如果你需要添加多个按钮，将JS文件进行扩展即可，有问题可以给我留言。
END