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创建的find元素运行<div id="column-form">...</div>，该元素找不到任何内容，因为它已经指向该元素。

所以，只需更换

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。

因此，最后，该脚本未输出标识为<div>的父column-form。

为什么值和＃34;未定义＆＃34;在短代码输出中 - tinyMCE

2 个答案: