1

因此，我试图在 wordpress 上的 tinyMCE 所见即所得编辑器中添加其他按钮。他们正在出现并且正在发挥作用（有点）。单击时，它们只是输出数组中的最后一个变量，这很奇怪，因为我在循环中的其他位置使用该变量并且它工作正常。

(function() {
  tinymce.create('tinymce.plugins.col', {
    init : function(ed, url) {
      var col_id = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven'];
      for(var i = 0; i < col_id.length; i++){
        var colNum = col_id[i];
        ed.addButton(colNum+'_col', {
          title : colNum+' Column',
          image : url+'/images/mce/'+colNum+'.png',
          onclick : function() {
            ed.selection.setContent('['+colNum+'_col]' + ed.selection.getContent() + '[/'+colNum+'_col]');
           }
         }); // ***** Col *****
         ed.addButton(colNum+'_col_first', {
           title : colNum+' Column First',
           image : url+'/images/mce/'+colNum+'.png',
           onclick : function() {
             ed.selection.setContent('['+colNum+'_col_first]' + ed.selection.getContent() + '[/'+colNum+'_col_first]');
            }
          });  // ******  Col First ******
          ed.addButton(colNum+'_col_last', {
            title : colNum+' Column Last',
            image : url+'/images/mce/'+colNum+'.png',
            onclick : function() {
              ed.selection.setContent('['+colNum+'_col_last]' + ed.selection.getContent() + '[/'+colNum+'_col_last]');
            }
          });   //*********  Col Last **********
        }
      },
      createControl : function(n, cm) {
        return null;
      },
    });
    tinymce.PluginManager.add('col', tinymce.plugins.col);
  })();

当我单击其中一个按钮时会发生什么，它会输出 [eleven_col][/eleven_col] 的短代码，这让我感到困惑，因为标题和图像 url 输出正确。

4

2 回答 2

3

我认为这是经典的闭包问题，希望可以在这里进行解释：JavaScript 闭包内循环 - 简单的实际示例

将所有内容包装在for循环中：

(function (colNum) {
    // Your code in the for loop
})(col_id[i]);

并删除您的var colNum = col_id[i];线路

所以最终的代码将如下所示：

(function() {
    tinymce.create('tinymce.plugins.col', {
        init : function(ed, url) {
            var col_id = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven'];
            for(var i = 0; i < col_id.length; i++){
                (function (colNum) {    // <---------------------- ADDED THIS
                    ed.addButton(colNum+'_col', {
                        title : colNum+' Column',
                        image : url+'/images/mce/'+colNum+'.png',
                        onclick : function() {
                            ed.selection.setContent('['+colNum+'_col]' + ed.selection.getContent() + '[/'+colNum+'_col]');

                        }
                    }); // ***** Col *****

                    ed.addButton(colNum+'_col_first', {
                        title : colNum+' Column First',
                        image : url+'/images/mce/'+colNum+'.png',
                        onclick : function() {
                            ed.selection.setContent('['+colNum+'_col_first]' + ed.selection.getContent() + '[/'+colNum+'_col_first]');

                        }
                    });  // ******  Col First ******

                    ed.addButton(colNum+'_col_last', {
                        title : colNum+' Column Last',
                        image : url+'/images/mce/'+colNum+'.png',
                        onclick : function() {
                            ed.selection.setContent('['+colNum+'_col_last]' + ed.selection.getContent() + '[/'+colNum+'_col_last]');

                        }
                    });   //*********  Col Last **********
                })(col_id[i]);    // <------------------------- ADDED THIS
            }
        },
        createControl : function(n, cm) {
            return null;
        }
    });
    tinymce.PluginManager.add('col', tinymce.plugins.col);
})();
于 2013-04-05T18:49:38.157 回答
3

@Ian 的答案是正确的，但您可能希望以这种方式组织代码，在循环中使用命名函数而不是IIFE。

函数的col_id参数实际上是不必要的，因为函数具有col_id变量的可见性，但我认为这样更清楚一些。

(function () {
    tinymce.create('tinymce.plugins.col', {
        init: function (ed, url) {
            function handleColumn(col_id, i) {
                // loop code in here
            }

            var col_id = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven'];
            for (var i = 0; i < col_id.length; i++) {
                handleColumn(col_id, i);
            }
        },
        createControl: function (n, cm) {
            return null;
        },
    });
    tinymce.PluginManager.add('col', tinymce.plugins.col);
})();
于 2013-04-05T18:55:37.293 回答