WordPress媒体上传控件简单使用

某些时候，我们想在自己的页面插入媒体库中的图片等媒体，可以使用WordPress发布/编辑文章使用的那个控件。官方也有简单的使用教程，但并不能满足我的需求，各种搜索，整理如下。

比如，我为图片添加了一个额外属性，比如“图片来源”，在插入图片的时候如何将这个属性添加到文章页面中。它默认拼凑的HTML代码最终的效果是图片+说明，标题啊描述啊这些自带的属性也是不会给展示到文章页面中的，更别说我自己额外添加的“图片来源”了。（PS：添加属性使用的Filter是attachment_fields_to_edit）

这可怎么办？很显然的需要重写它插入这个动作函数，也就是有了图片信息的时候，最终插入到文章页面的HTML该由我自己拼。可它是什么我并不知道，各种搜索也少有资料。一翻折腾后才查到，插入到文章页面的方法是wp.media.editor.insert(html)执行，html是什么就插入什么。但我没有图片信息，无法增加我想增加的啊。再了解到，它默认插入的是数据其实是由wp.media.editor.send.attachment(props, attachment)来决定，props是对方方式、链接这些，attachment则是选中的图片的信息了。但是，额外添加的属性却是被放到一块并且被存储为原始HTML代码，你还得从里边匹配才得。

上边还看不到实际值，在右边很远的地方呢。

这特么，得出动正则大法才能把我需要的“原创拍摄”整出来啊。最终方案定了，覆盖它的wp.media.editor.send.attachment()方法，自己拼要插入的HTML代码。但是，你这只是插入图片需要这样，它这个控件可不单单是插入图片的，还有音频，视频，附件等等，非图片还是得用它原来的方案。因此，得分类讨论，只动图片这一类型。

/**
 * 重写编辑器准备图片的方法
 */
;jQuery(document).ready(function(e) {
	var _original = wp.media.editor.send.attachment;

	wp.media.editor.send.attachment = function(props, attachment) {
		console.log(props);
		console.log(attachment);
		if (attachment.type === 'image') {
			var source = '';
			var HOME_URL = location.protocol + '//' + location.hostname;
			if (attachment.compat && attachment.compat.item) {
				var pattern = /\[image_source\]['|"][\s]*value=['|"](.*)['|"]/;
				var item = attachment.compat.item;
				var matchResult = item.match(pattern);
				source = matchResult ? matchResult[1] : '';
			}
			var result = '<div class="article-body-img">';
			result += '<img class="align' + props.align + '" src="' + attachment.url.replace(HOME_URL, '') + '" alt="' + (attachment.alt || '') + '" />';
			result += '<small><em>' + (attachment.description || '') + '  <span class="photo-source">图片来源：' + source + '</span></em></small>';
			result += '</div>';
			return result;
		} else {
			return _original.apply(this, arguments);
		}
	}
});

至此，为图片添加额外属性并插入到文章页面中解决。

上边是在插入这一块动的刀，但如何显示这个模态框呢？显示都显示不了变何插入呢。显示也简单，首先得在PHP中使用wp_enqueue_media()将所需要的Js+CSS+HTML引进来，再在Js中使用wp.media()创建一个对象，调用对象的open()方法即可。

var frame = null;
var $add = jQuery('#add');
$add.click(function(e) {
	e.preventDefault();
	if (frame) {
		frame.open();
		return;
	}
	frame = wp.media.frames.frame = wp.media({
		title: '选择或上传一张图片插入到该场景中',
		button: {
			text: '使用该图片'
		},
		library: {
			orderby: 'date',
			order: 'DESC',
			type: 'image',
		}
	});

	frame.on('select',
	function() {
		var media_id = frame.state().get('selection').first().toJSON().id;
		if (!media_id) {
			alert('错误！没有选择图片');
			return;
		}
		jQuery.ajax({
			url: $add.attr('data-url'),
			type: 'post',
			dataType: 'json',
			data: 'media_id=' + media_id + '&action=four_big_add_group_item',
			beforeSend: function() {
				LOADING.show('正在保存，请稍候...');
			},
			success: function(result) {
				console.log(result);
				if (result.code == 1) {
					location.reload();
				} else {
					alert(result.msg);
				}
			},
			error: function(xhr, statusText) {
				alert(statusText);
			},
			complete: function() {
				LOADING.hide();
			}
		})
	});
	frame.open();
});

以上是弄四大旗舰过程中，为场景添加图片的代码。关键是要找到它的API，在这里，“select”事件就是点了插入按钮后触发，触发后会关闭模态框，要阻止关闭，我测试那得重写close()方法，但你就无法关闭了，因此不可取。官方的文档没有介绍，我是看的一个插件里边的介绍。

以上是两点关于WordPress上传控件的使用。参考文档如下：

官方文档：https://codex.wordpress.org/Javascript_Reference/wp.media
介绍插件：https://github.com/ericandrewlewis/wp-media-javascript-guide
其他参考：
http://mikejolley.com/2012/12/21/using-the-new-wordpress-3-5-media-uploader-in-plugins/
http://stackoverflow.com/questions/13847714/wordpress-3-5-custom-media-upload-for-your-theme-options

2016/02/17更新：

对于WP原始的插入图片，其实还是选择插入到媒体比较好，可以点击图片查看大图。但它是在当前页面打开，要查看文章剩下的内容还得点击后退，体验不佳。如何改成在新页面打开呢，也就是在a链接上添加一个target=”_blank”属性。可以仿着上边来，先保存原始的wp.media.editor.insert，再重写之将要插入的值添加这个属性即可。

var _insert = wp.media.editor.insert;

wp.media.editor.insert = function(html) {
	_insert.call(html.replace(/<a href=/, '<a target="_blank" href='));
}