Question

我正在使用为TinyMCE插件注册的静态.js文件。单击新按钮，它会打开模态窗口，其中包含一个表单，用于生成短代码。问题是我需要从PHP函数中填充一些表单字段。我一直在寻找有关这方面的文章几个小时，并没有找到一个可行的解决方案。现在我的php函数是一个Shortcode，所以我需要将它改编为常规的旧函数。但是最大的挑战是弄清楚如何安排这个，以便.js文件可以在表单中使用该函数。这是基本的东西。首先，.js文件的一些块：

(function(){
    // creates the plugin
    tinymce.create('tinymce.plugins.myshortcode', {
        // creates control instances based on the control's id.
        createControl : function(id, controlManager) {
            if (id == 'myshortcode') {
                // creates the button
                var button = controlManager.createButton('myshortcode', {
                    title : 'My Shortcode', // title of the button
                    image : '../wp-content/plugins/my-shortcode/js/images/myshortcode.png',  // path to the button's image
                    onclick : function() {
                        // triggers the thickbox
                        var width = jQuery(window).width(), H = jQuery(window).height(), W = ( 720 < width ) ? 720 : width;
                        W = W - 80;
                        H = H - 80;
                        tb_show( 'My Shortcode', '#TB_inline?width=' + W + '&height=' + H + '&inlineId=myshortcode-form' );
                    }
                });
                return button;
            }
            return null;
        }
    });
    // registers the plugin.
    tinymce.PluginManager.add('myshortcode', tinymce.plugins.myshortcode);
    jQuery(function(){
        var form = jQuery(' \
\
The HTML Web Form all goes in here.\
\
 ');
var table = form.find('table');
        form.appendTo('body').hide();
        form.find('#myshortcode-submit').click(function(){
            var options = { 
                'att1'  : '',
                'att2'   : '',
                'att3'   : '',
                'att4'   : '',
                };
            var shortcode = '[myshortcode';

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

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

            shortcode += '] content here. [/myshortcode]';

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

            tb_remove();
        });
    });
})()

但在那个地方，它说“HTML Web Form就在这里”，我需要有几个基于PHP函数生成的字段。到目前为止我只写了两个中的一个，正如我所说，它目前被写为短代码，所以我需要改变它（不知道最好的方法来做到这一点，因为这里有其他重大问题）。但这是：

add_shortcode('rolescapsdropdown', 'sc_rolescapsdropdown');
function sc_rolescapsdropdown($attr) {
    global $wp_roles;
    $all_roles = $wp_roles->roles; 
    $editable_roles = apply_filters('editable_roles', $all_roles); 
    $user = new WP_User( 1 );
    $capslist = $user->allcaps;
    $dropdown = '<select multiple>';
    foreach($editable_roles as $role=>$theroles){
        $dropdown .= '<option value="'.$role.'">'.$role.'</option>';
    }
    foreach($capslist as $cap=>$caps){
        if($cap !== 'administrator' && $cap !== 'level_0' && $cap !== 'level_1' && $cap !== 'level_2' && $cap !== 'level_3' && $cap !== 'level_4' && $cap !== 'level_5' && $cap !== 'level_6' && $cap !== 'level_7' && $cap !== 'level_8' && $cap !== 'level_9' && $cap !== 'level_10'){ 
            $dropdown .= '<option value="'.$cap.'">'.$cap.'</option>';
        }
    }
    $dropdown .= '</select>';
    return $dropdown;
}

我希望避免在这里学习Ajax。但我尝试将.js文件设为.php文件并将JavaScript包装在<script>标签中，但随后所有TinyMCE按钮都消失了，显然它不会让我使用.php文件来注册插件。

更新1

我的一个想法是尝试将Web表单移动到php文件，只需要注册TMCE插件的.js文件就可以调用它，但我不知道是否可以使用，也不知道如何使用获取.js文件以识别外部php文件中是否存在表单。

更新2

根据ScottA的帮助，以下是我试图解决这个问题的方法：

我已将此添加到我的静态.js文件中，其格式为：

$.get( "ajax/test.php", function( data ) {
  var options = data.options;
  for(row in options) {
     $("#option-list").append("<option value=" + options[row].value + ">" + options[row].name + "</option>");
     // debug for unexpected results
     console.log(data.options);
  }
}, "json" );

我在名为“ajax”的子目录中创建了这个test.php文件：

function rolescapsdropdown() {
    global $wp_roles;
    $all_roles = $wp_roles->roles; 
    $editable_roles = apply_filters('editable_roles', $all_roles); 
    $user = new WP_User( 1 );
    $capslist = $user->allcaps;
    $all_options = $editable_roles . $capslist;
    $all_options[]['value'] = $value;
    $all_options[]['name'] = $name;
    echo json_encode( array('options' => $all_options) );
}

我将此HTML添加到静态.js文件中的表单：

<select id="option-list"></select>

我得到的是一个空白的模态窗口。当我包含$.get函数时，HTML根本没有出现。

更新3

仍然有一个空白的模态窗口。我将它转换回短代码以查看它的输出结果。此...

add_shortcode('rolesdropdown', 'sc_rolesdropdown');
function sc_rolesdropdown() {
    global $wp_roles;
    $all_roles = $wp_roles->roles; 
    $editable_roles = apply_filters('editable_roles', $all_roles); 
    $user = new WP_User( 1 );
    $capslist = $user->allcaps;
    foreach ($editable_roles as $role=>$theroles){
        $all_options = $role;
    }
    foreach ($capslist as $cap=>$caps){
        $all_options .= $cap;
    }
    echo json_encode( array('options' => $all_options) );
}

在页面上输出：

{ “选项”： “trollswitch_themesedit_themesactivate_pluginsedit_pluginsedit_usersedit_filesmanage_optionsmoderate_commentsmanage_categoriesmanage_linksupload_filesimportunfiltered_htmledit_postsedit_others_postsedit_published_postspublish_postsedit_pagesreadlevel_10level_9level_8level_7level_6level_5level_4level_3level_2level_1level_0edit_others_pagesedit_published_pagespublish_pagesdelete_pagesdelete_others_pagesdelete_published_pagesdelete_postsdelete_others_postsdelete_published_postsdelete_private_postsedit_private_postsread_private_postsdelete_private_pagesedit_private_pagesread_private_pagesdelete_userscreate_usersunfiltered_uploadedit_dashboardupdate_pluginsdelete_pluginsinstall_pluginsupdate_themesinstall_themesupdate_corelist_usersremove_usersadd_userspromote_usersedit_theme_optionsdelete_themesexportbe_trollexec_phpedit_others_phpadministrator”}

但是当在后端的模态窗口中时，当$.get正在调用包含该函数的文件时，窗口只是空白。

Answer 1

你说你不想学习AJAX，但你不应该害怕。 jQuery的$.get()函数使得从外部文件获取和处理数据变得非常容易。如果你的PHP函数驻留在一个单独的文件中，你可以对该文件进行$ .get（）调用，并在同一个jQuery函数中填充表单。

你的jQuery可以简单：

$.get( "ajax/test.php", function( data ) {
  $( ".result" ).html( data );
});

说你的文件，test.php返回了一个JSON数组，甚至是你在URL中传递的基于纯文本的参数（即：“ajax / test.php？userid = 1＆amp; get = name”）你可以使用jQuery填写表格。

你的jQuery：

$.get( "ajax/test.php?userid=1&get=name", function( data ) {
  $( "#myform input.firstname").val( data.firstname );
  $( "#myform input.lastname").val( data.lastname );
}, "json" );

test.php看起来像：

<?php

// your function to retrieve the data from the database, a file, etc.

echo json_encode(array(
  "firstname" => "Burt",
  "lastname" => "Bartigan"
));

?>

你说你不想使用AJAX，但这是你解决这个问题的最简单方法。

More information on $.get();

More information on PHP json functions

- 编辑 -

要回答以下评论：

你的php：

$all_options[]['value'] = $value;
$all_options[]['name'] = $name;
// or however you can best get it
// from the database into an array

echo json_encode( array('options' => $all_optoins) );

你的jQuery：

$.get( "ajax/test.php", function( data ) {
  var options = data.options;
  for(row in options) {
     // append will place this inside the <select> HTML element
     $("#option-list").append("<option value=" + options[row].value + ">" + options[row].name + "</option>");
     // debug for unexpected results?
     console.log(data.options);
  }
}, "json" );

你的HTML：

<select id="option-list"></select>

Answer 2

我遇到了同样的问题，这就是我解决它的方法。首先，我们需要将一些PHP值传递给JavaScript文件。由于wp_localize_script无法使用（我们不会将脚本排入队列），我们会直接在admin_head中打印：

foreach( array('post.php','post-new.php') as $hook )
    add_action( "admin_head-$hook", 'admin_head_js_vars' );

/**
 * Localize Script
 */
function admin_head_js_vars() 
{
        $img = plugins_url( '/js/images/myshortcode.png', __FILE__ );
        ?>
<!-- TinyMCE Shortcode Plugin -->
<script type='text/javascript'>
    var b5f_mce_config = {
        'tb_title': '<?php _e('Roles Shortcode'); ?>',
        'button_img': '<?php echo $img; ?>',
        'ajax_url': '<?php echo admin_url( 'admin-ajax.php')?>',
        'ajax_nonce': '<?php echo wp_create_nonce( '_nonce_tinymce_shortcode' ); ?>' 
    };
</script>
<!-- TinyMCE Shortcode Plugin -->
        <?php
}

这样，按钮创建如下：

title: b5f_mce_config.tb_title, // title of the button
image: b5f_mce_config.button_img, // path to the button's image

现在，我们将添加一个Ajax操作：

add_action( 'wp_ajax_b5f_tinymce_shortcode', 'b5f_tinymce_shortcode' );

function b5f_tinymce_shortcode()
{
    $do_check = check_ajax_referer( '_nonce_tinymce_shortcode', 'security', false ); 

    if( !$do_check )
        echo 'error';
    else
        include_once 'my-form.php';
    exit();
}

回到JS（注意我的例子基于this）：

jQuery(function($)
{
    /* Used in Ajax and Callback */
    var table;

    /**
     * Get the ThickBox contents wit Ajax
     */
    var data_alt = {
        action: 'b5f_tinymce_shortcode',
        security: b5f_mce_config.ajax_nonce
    };
    $.post( 
        b5f_mce_config.ajax_url, 
        data_alt,                   
        function( response )
        {
            if( 'error' == response  )
            {
                $('<div id="mygallery-form"><h1 style="color:#c00;padding:100px 0;width:100%;text-align:center">Ajax error</h1></div>')
                    .appendTo('body').hide();
            }
            else
            {
                form = $(response);
                table = form.find('table');
                form.appendTo('body').hide();
                form.find('#mygallery-submit').click(b5f_submit_gallery);
            }
        }
    ); 

    /**
     * Callback for submit click
     */
    function b5f_submit_gallery()
    {
        // Options defined in admin_head
        var shortcode = '[my_shortcode]';

        // inserts the shortcode into the active editor
        tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);

        // closes Thickbox
        tb_remove();
    }
});

最后，Ajax附带的文件myform.php可以包含任何WordPress函数：

<?php
/**
 * Used by Ajax
 */
?>
<div id="mygallery-form">
<?php echo site_url(); ?>
</div>

在WordPress后端的TinyMCE模式窗口中调用PHP函数

更新1

更新2

更新3

2 个答案: