Home » Code » WordPress媒体上传控件简单使用

WordPress媒体上传控件简单使用

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

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

uploader_original

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

自己添加的额外属性在compat中

自己添加的额外属性在compat中

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

uploader_extend_attr_detail
这特么,得出动正则大法才能把我需要的“原创拍摄”整出来啊。最终方案定了,覆盖它的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()方法,但你就无法关闭了,因此不可取。官方的文档没有介绍,我是看的一个插件里边的介绍。

frame_api

以上是两点关于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='));
}

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload CAPTCHA.