Adding a Media Button to the WordPress Content Editor

Question

Adding a Media Button to the WordPress Content Editor

Kevin

2022年4月2日 20:34

So i'm trying to add a button over the text editor which on pressed lets the user paste in a youtube link which is then covered in shortcode something like this [code]youtube.com[/code]. Following this guide lets me show the button however pressing the button does northing. nothing afterwards pops up.

See screenshots for clarification. And here's my code:

jQuery(function($) {
    $(document).ready(function(){
            $('#insert-my-media').click(open_media_window);
        });

        function open_media_window() {
            if (this.window === undefined) {
                this.window = wp.media({
                        title: 'Insert a media',
                        library: {type: 'image'},
                        multiple: false,
                        button: {text: 'Insert'}
                    });
        
                var self = this; // Needed to retrieve our variable in the anonymous function below
                this.window.on('select', function() {
                        var first = self.window.state().get('selection').first().toJSON();
                        wp.media.editor.insert('[myshortcode id=' + first.id + ']');
                    });
            }
        
            this.window.open();
            return false;
        }
        
});

And here's the php inside function.php:

add_action('media_buttons', 'add_my_media_button', 25);

function add_my_media_button() {
    echo 'a href=# id=insert-my-media class=buttonAdd my media/a';
}

function include_media_button_js_file() {
    wp_enqueue_script('media_button', get_template_directory_uri().'/assets/js/media_button.js');
}

Topic buttons editor html-editor tinymce visual-editor Wordpress

Category Web

user141080 · Accepted Answer · 2022年4月2日 20:34

According to what you have posted, the action "wp_enqueue_media" is missing for the function "include_media_button_js_file". In this case, the JavaScript file "media_button.js" would never be loaded.

By the way, the function "wp.media" opens the media dialog for uploading or selecting images. However, you cannot enter any text in this dialog.

Maybe the following example will help you.

Note: I used WordPress version 5.9.2 with the "Classic Editor" plugin (version: 1.6.2). I used jQuery UI to display the dialog. jQuery UI is one of the libraries that comes with WordPress.

Add the JS and CSS files to the admin area. The import part is to add “jquery-ui-dialogi” as dependency and load the related CSS files.

 function my_plugin_include_media_button_js_file() {

   // include file only in admin area
   if( is_admin() ){

     // JS
     wp_enqueue_script(
         'my_plugin_media_button', // handle
         plugin_dir_url( __FILE__ ) . '/assets/js/media_button.js',// source
         array('jquery-ui-dialog' ),   // dependencies
         fileatime( plugin_dir_path(__FILE__) . '/assets/js/media_button.js'  ) // version
     );

     // CSS
     wp_enqueue_style (  'wp-jquery-ui-dialog');

   }

 }
 add_action('wp_enqueue_media', 'my_plugin_include_media_button_js_file');

jQuery UI uses HTML to display the dialog. The HTML code is only needed when the dialog is displayed. For this reason, the code is written to the footer.

 function my_plugin_dialog_template() {

    // template for the dialog
    $dialog = '<div id="my-plugin-url-dialog" class="hidden" >';

    $dialog .= '<input type="url" 
                 placeholder="https://www.youtube.com/"
                 name="my-plugin-url-dialog-input" 
                 id="my-plugin-url-dialog-input" />';

   $dialog .= '</div>';

   echo $dialog;
 }
 add_action('admin_footer', 'my_plugin_dialog_template');

Add the button to the editor

 function my_plugin_add_my_media_button() {

    echo '<a href="#" id="my-plugin-btn" class="button">Add Url</a>';
 }
 add_action('media_buttons', 'my_plugin_add_my_media_button', 25);

The dialog is displayed by using JavaScript. The button "Add Url" open the dialog. By pressing the "Add" button, the content from the input field is transferred to the editor. (the code shows the whole file "media_button.js")

 jQuery(function($) {

 $(document).ready(function(){

     // creation of the dialog
     $('#my-plugin-url-dialog').dialog({
         title: 'Enter your URL',
         autoOpen: false,
         draggable: false,
         width: 'auto',
         modal: true,
         resizable: false,
         closeOnEscape: true,
         buttons: {
             "Add": function() {

                 // takes the content from the input field and "creates" the shortcode
                 let str = '[myshortcode]' + $('#my-plugin-url-dialog-input').val() +'[/myshortcode]';

                 // insert text in editor
                 wp.media.editor.insert(str);

                 // close dialogue
                 $( this ).dialog( "close" );
             },
             Cancel: function() {
                 $( this ).dialog( "close" );
             }
         }
     });

     // click-handler for the "Add Url" button
     $('#my-plugin-btn').click(function (){

         // empty input field
         $('#my-plugin-url-dialog-input').val('');

         // open dialog
         $('#my-plugin-url-dialog').dialog('open');
     });

 });

 });

Added button "Add Url":

Dialog to enter the URL:

Adding a Media Button to the WordPress Content Editor

About