javascript - 在 WordPress 后端的 TinyMCE 模态窗口内调用 PHP 函数

Question

我正在使用为 TinyMCE 插件注册的静态 .js 文件。单击新按钮，它会打开模式窗口，其中包含一个表单，我用它来生成简码。问题是我需要从 PHP 函数填充一些表单字段。我已经看这方面的文章几个小时了，但还没有找到可行的解决方案。现在我的 php 函数是一个简码，所以我需要将其调整为常规的旧函数。但最大的挑战是弄清楚如何安排它，以便 .js 文件可以采用表单中的函数。这是基本的东西。首先，.js 文件的一些 block :

(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 表单放入此处”的地方，我需要有几个基于 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) );
}

在页面上输出:

{"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&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>