• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > 给wordpress模板编辑器添加插入文章链接的按钮2:添加弹窗

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

    作者: 分类:wordpress CMS主题制作 点击: 3,286 次
    wordpress CMS主题:ssmay主题

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

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

      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 = '<style>';
      h += '.single_doc{ position:fixed; width:400px; height:300px; border:2px solid #ccc; border-radius:5px; padding:20px; background:#fff; margin:auto; top:0;left:0; right:0; bottom:0; z-index:1999; box-shadow:2px 2px 2px 2px #ccc; }';
      h += ' li{ list-style:none; }';
      h += '.form_doc{ width:100%; height:30px; line-height:30px; }';
      h += '.form_doc input{ width:70%; margin-right:10px; }';
      h += '.form_doc img{ float:right; }';
      h += '.posts_div{width:100%; height:80%; overflow-y:scroll; margin-top:10px; }';
      h += '.posts_div li{ display:block; width:100%; height:20px; }';
      h += '.posts_div li table{ display:none }';
      h += '</style>';
      //弹窗内容
      var input = '<div class="single_doc"><div class="form_doc"><input type="text" id="search_single"><button id="single_submit">搜索</button><img src="/school/wp-content/themes/mlong/images/close.jpg" width=30></div><div class="posts_div"></div></div>';

      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模板编辑器添加插入文章链接的按钮2:添加弹窗

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



      QQ二维码

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201903277258.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    一条回应:“给wordpress模板编辑器添加插入文章链接的按钮2:添加弹窗”

    1. guoqw说道:

      这样啊 受教了。支持一下

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.