为什么短代码输出中的值 "undefined" - tinyMCE

Question

我已经成功地在 WordPress 编辑器中添加了一个 tinyMCE 按钮，用于添加列短代码，它一切正常，除非我在弹出窗口 window 中按下 "Insert Column"。输出未正确获取所选值。它将此输出到编辑器中：

[column size="undefined" last="undefined" margin="undefined" bottom="undefined"][/column]

以下是我目前的脚本。我错过了什么吗？

    (function() {

    tinymce.create('tinymce.plugins.ljshortcodes', {

        init : function(ed, url) {

            /* Column */   
            ed.addButton('column', {

                title : 'Add Column',
                text  : 'Column',
                onclick : function() {

                    tb_show( 'Column Shortcode', '#TB_inline?inlineId=column-form' );

                }

            });

        },

        createControl : function(n, cm) {
            return null;
        }

    });

    tinymce.PluginManager.add('ljshortcodes', tinymce.plugins.ljshortcodes);

    jQuery(function(){

        var form = jQuery('<div id="column-form"><div id="column-box" class="form-box">\
            <div class="option-row">\
                <div class="desc">\
                    <label for="column-size">Size</label>\
                </div>\
                <select name="size" id="column-size">\
                    <option value="half">One Half (1/2)</option>\
                    <option value="third">One Third (1/3)</option>\
                    <option value="twothirds">Two Thirds (2/3)</option>\
                    <option value="fourth">One Fourth (1/4)</option>\
                    <option value="threefourths">Three Fourths (3/4)</option>\
                    <option value="fifth">One Fifth (1/5)</option>\
                    <option value="twofifths">Two Fifths (2/5)</option>\
                    <option value="threefifths">Three Fifths (3/5)</option>\
                    <option value="fourfifths">Four Fifth (4/5)</option>\
                    <option value="full">Full (1/1)</option>\
                </select>\
            </div>\
            <div class="option-row">\
                <div class="desc">\
                    <label for="column-last">Last In Row?</label>\
                </div>\
                <select name="last" id="column-last">\
                    <option value="half">No</option>\
                    <option value="third">Yes</option>\
                </select>\
            </div>\
            <div class="option-row">\
                <div class="desc">\
                    <label for="column-margin">Remove All Margin?</label>\
                </div>\
                <select name="margin" id="column-margin">\
                    <option value="yes">No</option>\
                    <option value="no">Yes</option>\
                </select>\
            </div>\
            <div class="option-row">\
                <div class="desc">\
                    <label for="column-bottom">Remove Bottom Margin?</label>\
                </div>\
                <select name="bottom" id="column-bottom">\
                    <option value="yes">No</option>\
                    <option value="no">Yes</option>\
                </select>\
            </div>\
        </div>\
        <p class="submit">\
            <input type="button" id="column-submit" class="button-primary" value="Insert Column" name="submit" />\
        </p>\
        </div>');

        var column_form = form.find('#column-form');

        form.appendTo('body').hide();

        form.find('#column-submit').click(function(){

            var options = { 
                'size'      : '',
                'last'      : 'no',
                'margin'    : 'yes',
                'bottom'    : 'yes'
            };

            var shortcode = '[column';

            for( var index in options) {
                var value = column_form.find('#column-' + index).val();

                if ( value !== options[index] )
                    shortcode += ' ' + index + '="' + value + '"';
            }

            shortcode += '][/column]';

            tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);

            tb_remove();

        });

    });

})();

Answer 1

那是因为 column_form.find('#column-' + index).val() 正在返回 undefined。当 jQuery 选择器不包含任何元素时，调用 .val() returns undefined，这意味着 column_form.find('#column-' + index) 没有选择任何元素。

查找选择器没有找到任何子元素，因为 column_form 实际上是一个空的 jQuery 选择。当您使用 var column_form = form.find('#column-form'); 设置值时，您可以从 jQuery 创建的 <div id="column-form">...</div> 元素中运行 find，它找不到任何东西，因为它已经指向该元素.

所以，只需替换

var column_form = form.find('#column-form');

与：

var column_form = form;

应该可以解决您的问题。您也可以只使用 form 而不是 column_form.

Answer 2

刚刚解决了我的问题！结果 var column_form = form.find('#column-form'); 工作正常，但由于某些原因 form 变量没有输出 <div id="column-form">.

已更改：

var column_form = form.find('#column-form');

.. 至：

var column_form = form.find('#column-box');

.. 并擦除 column-form div.

所以最后，脚本没有输出 ID 为 column-form 的父级 <div>。

为什么短代码输出中的值 "undefined" - tinyMCE

Why are the values "undefined" in the shortcode output - tinyMCE

javascript

wordpress

jquery

tinymce