给wordpress模板编辑器添加插入文章链接的按钮2：添加弹窗

在上一节中，我们介绍了给WordPress模板的文章编辑器添加了一个自定义按钮，今天我们来为这个自定义按钮来添加点击弹窗功能——就是点击这个按钮时，会在当前编辑页面出现一个弹窗。这个弹窗上有一个表单输入框，在里面输入想要搜索的标题关键词，再点击搜索就会在下面显示搜索到的文章标题。

给wordpress模板编辑器添加插入文章链接的按钮1：添加自定义按钮

给wordpress模板编辑器添加插入文章链接的按钮2：添加弹窗

给wordpress模板编辑器添加插入文章链接的按钮3：添加搜索功能

当然，本章只是来实现这个弹窗，搜索功能在后面再做相应的介绍。

在WordPress主题的js文件夹下创建一个media_button.js 文件，代码如下：

//文章编辑器自定义按钮
(function() {
tinymce.create('tinymce.plugins.myadvert', { //注意这里有个 myadvert
init : function(ed, url) {
ed.addButton('myadvert', { //注意这一行有一个 myadvert
title : '插入推广',
image : url+'/video.png', //注意图片的路径 url是当前js的路径
onclick : function() {
// 弹窗样式
var h = '

';
//弹窗内容
var input = '

搜索

';

h += input;
$("body").append(h); //在页面追加 div模块弹窗

$("#single_submit").click(function(){ //点击提交
var input_val = $("#search_single").val();
$(".posts_div").empty(); //清除内容，防止多次点击后，出现多次
$.ajax({
type:'post',
url:'http://localhost/school/wp-content/themes/mlong/includes/single_insert.php', //这个是搜索功能的php文件，路径一定要对哦
data:{ input_val:input_val },
success:function(e){
//console.log(e);
$(".posts_div").append(e); //将搜索的内容添加到 post_div盒子中

var li = $(".posts_div li");

$(li).click(function(){ //点击一个标题
var tex = $(this).find(".table").html(); //获取这个标题下面的table盒子中的表格
ed.selection.setContent(tex); //将数据添加到编辑器
});
}
})
})

$(".form_doc img").click(function(){ //关闭窗口
console.log('close');
$(".single_doc").hide();
})

}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('myadvert', tinymce.plugins.myadvert); //注意这里有两个 myadvert
})();

这个media_button.js文件路径要跟上一节中的要对应起来。这样，在wordpress模板的文章编辑器的可视化界面的按钮中就可以看到我们添加的这个自定义按钮，这时，点击这个按钮，就会弹出一个表单弹窗。如下图：

通过上面，我们给wordpress模板的编辑器添加了自定义按钮以及这个按钮的弹窗模块。但这时，点击弹窗的搜索，会没有任何反应，因为，我们还没有跟后 端数据库进行交互。这个我们在下一节中将做详细介绍。