TinyMCE弹出添加媒体按钮 _WordPress主题

在我正在开发的Wordpress主题内, 我有一个TinyMCEPopup可以向编辑器添加简码, 有些简码需要图像。我可以添加一个” 添加媒体” 按钮来打开Wordpress媒体上传器, 并允许用户选择或上传图像, 即使我在TinyMCEPopup内部吗？
#1不知道是否有帮助, 但是我遇到了同样的问题, 并像这样解决了它。
在functions.php中添加

add_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(); } });

首先, 你添加按钮功能。此处列出了要放入弹出窗口的选项。它不是100％完成的, 但是比废话的官方文档要好。
第一部分是按钮初始化。这为你提供了” 我的用于媒体上传的按钮” 按钮, 单击后你将获得一个带有输入字段和按钮的模式。
【TinyMCE弹出添加媒体按钮】在按钮上单击, 媒体上载将打开, 你可以选择图像。选择后, URL将在输入字段中, 你将在短代码中获得它。
希望能帮助到你：)
#2还有另一个这样的问题(从tinymce插件弹出窗口打开/访问WP Media库), 所以我在这里粘贴答案, 因为这是相似的：
嗨-我刚才遇到了同样的问题, 找到了解决方案, 所以我在这里分享。我希望还不晚。
首先, 要能够使用WP Add Media按钮, 必须先排队所需的脚本。这很容易, 只需像下面这样调用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="http://www.srcmini.com/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弹出窗口上进行(这是我面临的问题)。我已经在hi和lo中寻找解决方案, 这就是对我有用的方法。但在此之前, 我将先谈谈我遇到的问题。当我第一次尝试实现此功能时, 我在弹出窗口本身遇到了” WP is undefined” 问题。要解决此问题, 只需将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对象传递到单击tinymce按钮时要打开的弹出窗口(实际上是iframe … )。你实际上可以通过此对象(ed.windowManager.open方法的第二个参数)将任何内容传递给弹出窗口！
最后但并非最不重要的一点是, 你必须像这样在JavaScript上引用传递的wp对象：