我在tinyMCE的工具栏中添加了一个按钮来启动弹出窗口。按钮调用editor.windowManager.open(...)
并传递此类参数作为URL:
/wp-admin/media-upload.php?post_id=SOME_POST_ID&type=z_recipe&tab=amd_zlrecipe&TB_iframe=true
在我的主插件文件中,我有这段代码在调用上述URL时生成一些iframe代码:
if (strpos($_SERVER['REQUEST_URI'], 'media-upload.php') && strpos($_SERVER['REQUEST_URI'], '&type=z_recipe') && !strpos($_SERVER['REQUEST_URI'], '&wrt='))
{
ZipRecipes::zrdn_iframe_content($_POST, $_REQUEST);
exit;
}
我发现a related answer about media uploads声称以下内容应该有效:
<!DOCTYPE html>
<!--suppress HtmlUnknownTarget -->
<head>
<?php
function load_custom_code() {
// jQuery
wp_enqueue_script('jquery');
// This will enqueue the Media Uploader script
wp_enqueue_media();
}
add_action( 'admin_enqueue_scripts', 'load_custom_code' );
?>
</head>
<body id="amd-zlrecipe-uploader">
<label for="image_url">Image</label>
<input type="text" name="image_url" id="image_url" class="regular-text">
<input type="button" name="upload-btn" id="upload-btn" class="button-secondary" value="Upload Image">
<script type="text/javascript">
jQuery(document).ready(function($){
$('#upload-btn').click(function(e) {
e.preventDefault();
var image = wp.media({
title: 'Upload Image',
// mutiple: true if you want to upload multiple files at once
multiple: false
}).open()
.on('select', function(e){
// This will return the selected image from the Media Uploader, the result is an object
var uploaded_image = image.state().get('selection').first();
// We convert uploaded_image to a JSON object to make accessing it easier
// Output to the console uploaded_image
console.log(uploaded_image);
var image_url = uploaded_image.toJSON().url;
// Let's assign the url value to the input field
$('#image_url').val(image_url);
});
});
});
</script>
</body>
但是,浏览器开发工具告诉我jQuery
和$
未定义。
所以,这可以通过修复jQuery和wp_enqueue_media
的方式或者改变我的初始弹出窗口的创建方式来解决。
你有任何帮助,我可以使用。