jquery window.send_to_editor ..无法在文本字段中插入文件URL

Question

我创建了一个Wordpress文件上传器。就像我点击添加媒体按钮一样，它需要我添加媒体上传器。但是当我选择图像时，它不会被插入到场中。我希望每当我选择一个图像并单击插入按钮时，图像URL就会插入到文本编辑器中。

var image_field;
jQuery(function($){
  $(document).on('click', 'input.select-img', function(evt){
     image_field = $(this).siblings('.img');
     check_flag=1;
     tb_show('', 'media-upload.php?type=image&TB_iframe=true');
     window.send_to_editor = function(html) {  
       imgurl = $('img', html).attr('src');
       image_field.val(imgurl);
       tb_remove();
     }
    return false;
  });
});

Answer 1

如果你没有，请加入jquery库。

https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"

请添加以下jquery代码，添加 HTML 代码。

的Jquery：

jQuery(document).ready(function() {
   jQuery('#upload_image_button').click(function() {
   formfield = jQuery('#upload_image').attr('name');
   tb_show('', 'media-upload.php?type=image&TB_iframe=true');

   window.send_to_editor = function(html) {
      imgurl = jQuery('img',html).attr('src');
      jQuery('#upload_image').val(imgurl);
      tb_remove();
   }
   return false;
});

HTML：

<tr valign="top">
  <td>Upload Menu Icon:</td>
  <td><label for="upload_image">
      <input id="upload_image" type="text" size="36" name="menu_icon" value="" required="" />
      <input id="upload_image_button" type="button" value="Upload Image" />
      <br />Enter an URL or upload an image from media.
      </label>
   </td>
</tr>

在主题function.php文件中包含以下PHP代码。

PHP：

function wp_gear_manager_admin_scripts() {
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
    wp_enqueue_script('jquery');
}

function wp_gear_manager_admin_styles() {
    wp_enqueue_style('thickbox');
}

add_action('admin_print_scripts', 'wp_gear_manager_admin_scripts');
add_action('admin_print_styles', 'wp_gear_manager_admin_styles');

重要提示：

点击插入按钮之前。请确认图像URL显示在文本字段中。请参见截图