1

我尝试通过按钮在 tinyMCE 编辑器中插入 Wordpress shortocde，但我遇到了一个小问题。脚本多次插入短代码。我很难解释清楚，所以我录制了一个简短的视频：

http://www.youtube.com/watch?v=bJJMkAXKNVM

这是一个完整的javascript代码：

jQuery(document).ready(function($){

$("#wpwrap").append("<div class=\"avgrund-cover\"></div>");


$("#close-modal").click(function(){

Avgrund.hide("#acf-popup");

});     

(function() {
  tinymce.create('tinymce.plugins.acfshortcode', {
  init : function(ed, url) {
     ed.addButton('acfshortcode', {
        title : 'Ajax Contact Form',
        image : url+'/../acf-button.png',
        onclick : function() {


           var showname = true;
           var showsubject = true;
           var showbox = true;
           var formwidth = $("#form-width").val();

           Avgrund.show("#acf-popup");

              $("#disable_name").click(function(e){

                 if (showname) {
                    $("#name").parent().slideUp('200');
                    showname = false;
                 }else{
                     $("#name").parent().slideDown('200');
                    showname = true;
                 }

              });




              $("#close-modal").click(function(e){

                 Avgrund.hide("#default-popup");

              });


              $("#disable_subject").click(function(e){

                 if (showsubject) {
                    $("#subject").parent().slideUp('200');
                    showsubject = false;
                 }else{
                    $("#subject").parent().slideDown('200');
                    showsubject = true;
                 }
              });

              $("#disable_box").click(function(e){

                 if (showbox) {
                    $("#acf-contact-form").removeClass('acf-box');
                    showbox = false;
                 }else{
                    $("#acf-contact-form").addClass('acf-box');
                    showbox = true;
                 }

              });

              $("#form-width").keyup(function() {
                formwidth = $("#form-width").val();
                $("#acf-contact-form").css('width', formwidth+'px');
              });

              $("#insert-acf-form").click(function(e){

                 var showname2, showsubject2;

                 if (showname == true) showname2 = 'yes'; else showname2 = 'no';
                 if (showsubject == true) showsubject2 = 'yes'; else showsubject2 = 'no';
                 if (showbox == true) box2 = 'yes'; else box2 = 'no';

                 var name_label = $("#name").val();
                 var email_label = $("#email").val();
                 var subject_label = $("#subject").val();
                 var message_label = $("#message-form").val();
                 var button_label = $("#acf-send-button").text();

                 if (formwidth < 140 ) formwidth = 140;
                 if (formwidth > 1000 ) formwidth = 1000;


                  ed.execCommand('mceInsertContent', false, '<p>[acf_contact_form width="'+formwidth+'px" box="'+box2+'" name="'+showname2+'" subject="'+showsubject2+'" name_label="'+name_label+'" email_label="'+email_label+'" subject_label="'+subject_label+'" message_label="'+message_label+'" button_text="'+button_label+'"]</p>');

                 Avgrund.hide("#default-popup");
                 e.preventDefault();
              });



        }
     });
  },
  createControl : function(n, cm) {
     return null;
  },
  getInfo : function() {
     return {
        longname : "Ajax Contact Form Shortcode",
        author : 'Jacek Jagiello',
        version : "1.0"
     };
  }
});
tinymce.PluginManager.add('acfshortcode', tinymce.plugins.acfshortcode);
})();

});

这是在编辑器中插入短代码的函数表单代码：

(...) onclick : function() {


       var showname = true;
       var showsubject = true;
       var showbox = true;
       var formwidth = $("#form-width").val();

       Avgrund.show("#acf-popup");

          $("#disable_name").click(function(e){

             if (showname) {
                $("#name").parent().slideUp('200');
                showname = false;
             }else{
                 $("#name").parent().slideDown('200');
                showname = true;
             }

          });




          $("#close-modal").click(function(e){

             Avgrund.hide("#default-popup");

          });


          $("#disable_subject").click(function(e){

             if (showsubject) {
                $("#subject").parent().slideUp('200');
                showsubject = false;
             }else{
                $("#subject").parent().slideDown('200');
                showsubject = true;
             }
          });

          $("#disable_box").click(function(e){

             if (showbox) {
                $("#acf-contact-form").removeClass('acf-box');
                showbox = false;
             }else{
                $("#acf-contact-form").addClass('acf-box');
                showbox = true;
             }

          });

          $("#form-width").keyup(function() {
            formwidth = $("#form-width").val();
            $("#acf-contact-form").css('width', formwidth+'px');
          });

          $("#insert-acf-form").click(function(e){

             var showname2, showsubject2;

             if (showname == true) showname2 = 'yes'; else showname2 = 'no';
             if (showsubject == true) showsubject2 = 'yes'; else showsubject2 = 'no';
             if (showbox == true) box2 = 'yes'; else box2 = 'no';

             var name_label = $("#name").val();
             var email_label = $("#email").val();
             var subject_label = $("#subject").val();
             var message_label = $("#message-form").val();
             var button_label = $("#acf-send-button").text();

             if (formwidth < 140 ) formwidth = 140;
             if (formwidth > 1000 ) formwidth = 1000;


              ed.execCommand('mceInsertContent', false, '<p>[acf_contact_form width="'+formwidth+'px" box="'+box2+'" name="'+showname2+'" subject="'+showsubject2+'" name_label="'+name_label+'" email_label="'+email_label+'" subject_label="'+subject_label+'" message_label="'+message_label+'" button_text="'+button_label+'"]</p>');

             Avgrund.hide("#default-popup");
             e.preventDefault();
          });



    }
4

1 回答 1

1

您正在为按钮的onclick处理程序中的弹出窗口添加事件处理程序。这意味着每次单击按钮时都会添加它们。

换句话说，第二次通过单击按钮打开弹出窗口时，您有两个单击处理程序#insert-acf-form。第三次您将拥有三个，依此类推。您分配的所有其他事件处理程序也是如此 - 但只有单击处理程序会立即显现，因为mceInsertContent将被调用两次。

一种解决方案：由于在您第一次单击按钮之前似乎已经创建了弹出窗口，您可以在 onclick 事件处理程序之外添加所有事件处理程序 - 即在您的初始化代码中（注意，代码仅用于演示这个想法，它没有经过测试，可能包括语法错误等等）：

jQuery(document).ready(function($) {
   $("#wpwrap").append("<div class=\"avgrund-cover\"></div>");

   $("#close-modal").click(function() {
      Avgrund.hide("#acf-popup");
   });

   (function() {
      var showname = true;
      var showsubject = true;
      var showbox = true;
      var formwidth = $("#form-width").val();

      // ********** MOVE REGISTRATION OF POPUP EVENT HANDLERS HERE **********

      tinymce.create('tinymce.plugins.acfshortcode', {
         init : function(ed, url) {
            ed.addButton('acfshortcode', {
               title : 'Ajax Contact Form',
               image : url+'/../acf-button.png',
               onclick : function() {
                  Avgrund.show("#acf-popup");
                  // ************* NOTE, NO EVENT HANDLERS HERE ***********
               }
            });
         },
         createControl : function(n, cm) {
            return null;
         },
         // etc.
      });
   })();
}

或者，您可以添加签入onclick以查看之前是否onclick已调用过，在这种情况下不再添加事件处理程序。

于 2013-07-14T19:08:44.780 回答