為什么在短代碼輸出中值“未定義”-tinyMCE

Question

我已經成功地將一個tinyMCE按鈕添加到WordPress編輯器中，以添加列簡碼，除了在彈出窗口中按“插入列”時，所有其他操作均有效。 輸出無法正確獲取所選值。 它將其輸出到編輯器中：

[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()返回undefined ，這意味着column_form.find('#column-' + index)沒有選擇任何元素。

find選擇器未找到任何子元素，因為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> 。