在WordPress后端的TinyMCE模式窗口中调用PHP函数 [英] Call PHP function inside TinyMCE modal window on the WordPress backend
问题描述
我正在使用为TinyMCE插件注册的静态.js文件。单击新按钮，它会打开模态窗口，其中包含一个表单，用于生成短代码。问题是我需要从PHP函数中填充一些表单字段。我一直在寻找有关这方面的文章几个小时，并没有找到一个可行的解决方案。现在我的php函数是一个Shortcode，所以我需要将它改编为常规的旧函数。但是最大的挑战是弄清楚如何安排这个，以便.js文件可以在表单中使用该函数。这是基本的东西。首先，.js文件的一些块：
I am using a static .js file that is registered for a TinyMCE plugin. You click on the new button and it opens up the modal window, with a form in it, that I use to generate a Shortcode. The problem is that I need some of my form fields to be populated from PHP functions. I've been looking at articles on this for hours and haven't found a workable solution. Right now my php function is a Shortcode, so I need to adapt it to be a regular old function. But the big challenge is figuring out how to arrange this so that the .js file can take the function in the form. Here's the basic stuff. First, some chunks of the .js file:
(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网页表格进入这里，我需要有几个基于PHP函数生成的字段。到目前为止我只写了两个中的一个，正如我所说，它目前被写为短代码，所以我需要改变它（不知道最好的方法来做到这一点，因为这里有其他重大问题）。但这里是：
But in that spot where it says, "The HTML Web Form goes in here," I need to have a couple of fields that are generated based on PHP functions. I've only written one of the two so far, and as I said, it's currently written as a Shortcode, so I need to change it (not sure the best way to do that given the other big questions here). But here it is:
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文件注册插件。
I'm hoping to avoid having to learn Ajax here. But I tried making the .js file a .php file and just wrapping the JavaScript in <script> tags, but then all the TinyMCE buttons disappeared, so apparently it won't let me use a .php file to register the plugin.
我有一个想法是尝试将网络表单移动到php文件，只需要注册TMCE插件的.js文件调用它，但我不知道是否可行，也不知道如何让.js文件识别外部php文件中是否存在该表单。
One idea I have is to try to move the web form to a php file, and just have the .js file that registers the TMCE plugin call it up, but I wouldn't know if that would work, nor how to get the .js file to recognize the existence of the form in an external php file.
根据ScottA的帮助，以下是我正在努力解决的问题：
Based on ScottA's help, here's how I'm trying to work this:
我已将此添加到我的静态.js文件中，其格式为：
I've added this to my static .js file that has the form:
$.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文件：
I've created this test.php file in a subdirectory called "ajax":
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文件中的表单：
And I added this HTML to the form in the static .js file:
<select id="option-list"></select>
我得到的是一个空白的模态窗口。当我包含 $。get 函数时，HTML根本没有出现。
What I'm getting is a blank modal window. None of the HTML is showing up at all when I include the $.get function.
仍然有一个空白的模态窗口。我将它转换回短代码以查看它的输出结果。这...
Still getting a blank modal window. I converted it back to a shortcode to see what it outputs. This...
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}
{"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 正在调用包含该函数的文件时，窗口只是空白。
But when in the modal window on the backend, the window is just blank when the $.get is calling the file with that function in it.
推荐答案
我遇到了同样的问题，这就是我解决它的方法。首先，我们需要将一些PHP值传递给JavaScript文件。由于 wp_localize_script 无法使用（我们没有将脚本排入队列），我们将直接在 admin_head 中打印：
I just had the same issue and this is how I solved it. First, we need to pass some PHP values to the JavaScript file. As wp_localize_script cannot be used (we're not enqueueing the script), we'll print it directly in 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
}
这样，按钮创建看起来像：
With this, the button creation looks like:
title: b5f_mce_config.tb_title, // title of the button
image: b5f_mce_config.button_img, // path to the button's image
现在，我们将添加一个Ajax动作：
Now, we'll add an Ajax action:
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（注意我的示例基于这个）：
Back to JS (noting that my example is based on 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();
}
});
最后，文件 myform.php ，包含在Ajax中，可以包含任何WordPress函数：
Finally, the file myform.php, included with Ajax, can contain any WordPress functions:
<?php
/**
* Used by Ajax
*/
?>
<div id="mygallery-form">
<?php echo site_url(); ?>
</div>
这篇关于在WordPress后端的TinyMCE模式窗口中调用PHP函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
