在我正在开发的 WordPress 主题中，我有一个 TinyMCEPopup 来向编辑器添加短代码，一些短代码需要图像。我可以添加一个“添加媒体”按钮来打开 Wordpress 媒体上传器并允许用户选择或上传图像，即使我在 TinyMCEPopup 中也是如此？
不知道是否有帮助，但我遇到了同样的问题并这样解决了。
在
functions.phpadd_action( 'after_setup_theme', 'mytheme_theme_setup' );
if ( ! function_exists( 'mytheme_theme_setup' ) ) {
function mytheme_theme_setup() {
add_action( 'init', 'mytheme_buttons' );
}
}
/********* TinyMCE Buttons ***********/
if ( ! function_exists( 'mytheme_buttons' ) ) {
function mytheme_buttons() {
if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
return;
}
if ( get_user_option( 'rich_editing' ) !== 'true' ) {
return;
}
add_filter( 'mce_external_plugins', 'mytheme_add_buttons' );
add_filter( 'mce_buttons', 'mytheme_register_buttons' );
}
}
if ( ! function_exists( 'mytheme_add_buttons' ) ) {
function mytheme_add_buttons( $plugin_array ) {
$plugin_array['mybutton'] = get_template_directory_uri().'/js/tinymce_buttons.js';
return $plugin_array;
}
}
if ( ! function_exists( 'mytheme_register_buttons' ) ) {
function mytheme_register_buttons( $buttons ) {
array_push( $buttons, 'mybutton' );
return $buttons;
}
}
这将初始化您需要的按钮。现在，在
tinymce_buttons.js(function() {
tinymce.PluginManager.add('mybutton', function( editor, url ) {
editor.addButton( 'mybutton', {
text: 'My button for media upload',
icon: false,
onclick: function() {
editor.windowManager.open( {
title: 'Insert Media',
body: [
{
type: 'textbox',
name: 'img',
label: 'Image',
value: '',
classes: 'my_input_image',
},
{
type: 'button',
name: 'my_upload_button',
label: '',
text: 'Upload image',
classes: 'my_upload_button',
},
],
onsubmit: function( e ) {
editor.insertContent( '[shortcode-name img="' + e.data.img + '"]');
}
});
},
});
});
})();
jQuery(document).ready(function($){
$(document).on('click', '.mce-my_upload_button', upload_image_tinymce);
function upload_image_tinymce(e) {
e.preventDefault();
var $input_field = $('.mce-my_input_image');
var custom_uploader = wp.media.frames.file_frame = wp.media({
title: 'Add Image',
button: {
text: 'Add Image'
},
multiple: false
});
custom_uploader.on('select', function() {
var attachment = custom_uploader.state().get('selection').first().toJSON();
$input_field.val(attachment.url);
});
custom_uploader.open();
}
});
首先添加按钮功能。 here给出了要放入弹出窗口的选项列表。它不是 100% 完整，但比垃圾的官方文档要好。
第一部分是按钮初始化。这将为您提供一个“我的媒体上传按钮”按钮，单击后您应该会得到一个带有输入字段和按钮的模式。
单击按钮，媒体上传将打开，您可以选择图像。选择后，网址将出现在输入字段中，您将在简码中获得它。
希望有帮助:)
还有一个这样的问题（从tinymce插件弹出窗口打开/访问WP媒体库），所以我将我的答案粘贴在这里，因为这很相似：
嗨 - 我刚才遇到了同样的问题并找到了解决方案，所以我在这里分享。我希望还不算太晚。
首先要能够使用 WP 添加媒体按钮，您必须将所需的脚本排入队列。这很简单，只需调用 wp_enqueue_media() 函数即可：
add_action('admin_enqueue_scripts', 'enqueue_scripts_styles_admin');
function enqueue_scripts_styles_admin(){
wp_enqueue_media();
}
此调用可确保您拥有使用 WP Media 按钮所需的库。
当然，您还应该有 HTML 元素来保存上传/选择的媒体文件 URL，如下所示：
<input type="text" class="selected_image" />
<input type="button" class="upload_image_button" value="Upload Image">
第一个文本字段将保存媒体文件的 URL，而第二个文本字段是用于打开媒体弹出窗口本身的按钮。
然后在你的 jscript 中，你会有这样的内容：
var custom_uploader;
$('.upload_image_button').click(function(e) {
e.preventDefault();
var $upload_button = $(this);
//Extend the wp.media object
custom_uploader = wp.media.frames.file_frame = wp.media({
title: 'Choose Image',
button: {
text: 'Choose Image'
},
multiple: false
});
//When a file is selected, grab the URL and set it as the text field's value
custom_uploader.on('select', function() {
var attachment = custom_uploader.state().get('selection').first().toJSON();
$upload_button.siblings('input[type="text"]').val(attachment.url);
});
//Open the uploader dialog
custom_uploader.open();
});
现在我不会解释每一行，因为它并不难理解。最重要的部分是使用 wp 对象来使所有这些工作。
棘手的部分是在 TinyMCE 弹出窗口上完成所有这些工作（这是我面临的问题）。我到处寻找解决方案，这对我有用。但在此之前，我先说一下我遇到的问题。当我第一次尝试实现此功能时，我在弹出窗口本身上遇到了“WP 未定义”问题。要解决这个问题，您只需将 WP 对象传递给脚本，如下所示：
(function() {
tinymce.create('tinymce.plugins.someplugin', {
init : function(ed, url) {
// Register commands
ed.addCommand('mcebutton', function() {
ed.windowManager.open(
{
file : url + '/editor_button.php', // file that contains HTML for our modal window
width : 800 + parseInt(ed.getLang('button.delta_width', 0)), // size of our window
height : 600 + parseInt(ed.getLang('button.delta_height', 0)), // size of our window
inline : 1
},
{
plugin_url : url,
wp: wp
}
);
});
// Register buttons
ed.addButton('someplugin_button', {title : 'Insert Seomthing', cmd : 'mcebutton', image: url + '/images/some_button.gif' });
}
});
// Register plugin
// first parameter is the button ID and must match ID elsewhere
// second parameter must match the first parameter of the tinymce.create() function above
tinymce.PluginManager.add('someplugin_button', tinymce.plugins.someplugin);
})();
我们感兴趣的是这一行 => "wp: wp" 。这一行确保我们将 wp 对象传递到弹出窗口（实际上是一个 iframe...），当我们单击tinymce 按钮时，该窗口将被打开。实际上，您可以通过此对象（ed.windowManager.open 方法的第二个参数）将任何内容传递到弹出窗口！
最后但并非最不重要的一点是，您必须在 JavaScript 上引用传递的 wp 对象，如下所示：
var args = top.tinymce.activeEditor.windowManager.getParams();
var wp = args.wp;
确保在调用/使用 WP 对象之前执行此操作。
这就是完成这项工作所需要做的一切。它对我有用，我希望它对你有用:)
经过长时间的搜索，我找到了这个博客：https://blog.buggerspot.com/2024/08/custom-tinymce-button-in-wysiwyg-editor.html
这是脚本：
(function($) {
tinymce.PluginManager.add('custom_mce_button', function(editor, url) {
editor.addButton('custom_mce_button', {
text: 'Custom Button',
icon: false,
onclick: function() {
var thumbnailImageFrame;
var thumbnailImageURL = '', thumbnailImageAlt = '';
var win = editor.windowManager.open({
title: 'Select Image and Heading',
body: [
{
type: 'button',
name: 'thumbnail_image',
label: 'Select Thumbnail Image',
text: 'Select Thumbnail Image',
classes: 'overflow-hidden', // Add custom class
onclick: function() {
if (thumbnailImageFrame) {
thumbnailImageFrame.open();
return;
}
thumbnailImageFrame = wp.media({
title: 'Select or Upload Thumbnail Image',
button: {
text: 'Use this image'
},
multiple: false
});
thumbnailImageFrame.on('select', function() {
var attachment = thumbnailImageFrame.state().get('selection').first().toJSON();
thumbnailImageURL = attachment.url;
thumbnailImageAlt = attachment.alt;
win.find('#thumbnail_image_url_display').text(attachment.url);
win.find('#thumbnail_image_alt_display').text(attachment.alt);
// Update button text to image name
win.find('button[name=thumbnail_image]').text(attachment.filename);
});
thumbnailImageFrame.open();
}
},
{
type: 'container',
html: '<div id="thumbnail_image_url_display"></div><div id="thumbnail_image_alt_display"></div>'
},
{
type: 'textbox',
name: 'heading',
label: 'Heading',
value: ''
}
],
onsubmit: function(e) {
if (thumbnailImageURL) {
editor.insertContent(`<h2>`+e.data.heading+`</h2><img alt="${thumbnailImageAlt}" src="${thumbnailImageURL}"/>`);
}
}
});
}
});
});
})(jQuery);