百度编辑器UEditor的图片单张或多张上传的方法接口

  •   
  • 17231
  • jQuery
  • 4
  • super_dodo
  • 2014/10/31

对于富文本编辑器，我们常常使用到百度编辑器。百度编辑器在国内已经算是比较优秀的了，功能也很强大。对于百度编辑器的优点功能自己去官网查看。同时建议使用最新版本的编辑器，最新版本的编辑器对图片处理有了很大的提升，也减少修复了很多bug。我现在的版本是1.4.3版本。

使用UEditor上传单张或多张图片的简易接口

对于前一篇文章，我写了使用jquery.easyui的图片上传并显示的方法表示有些缺陷和冗余，毕竟引入的js组件越少bug的可能越小，如果你不想使用百度编辑的话。可以参考这一篇上传单张图片的方法 图片头像ajax上传并显示缩略图的方法和示例

本方法和示例主要是对ueditor.all.js进行改造成 ueditor.all_img.js 请使用我的ueditor.all_img.js 里面吧图片上传，多图上传的方法都重新改写了，但是改动不多。。详细你对比一下就能知道.主要是把图片上传成功的返回值，发挥的json进行了重新的渲染到自己希望的部分。话不多说，直接上代码:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>使用UEditor上传单张或多张图片的简易接口</title>
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="css/common_ajax.css">
	<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	<script type="text/javascript" charset="utf-8" src="js/ueditor2014/ueditor.config.js"></script>
	<script type="text/javascript" charset="utf-8" src="js/ueditor2014/ueditor.all_img.js"> </script>
</head>
<body>

<form action="" method="post" id="post_form" class="form-inline">
	<table class="post_table" id="post_table">
		<tbody>
		<tr>
			<td>图片简介</td>
			<td><input type="text" name="Form&#91;remark&#93;" value="" class="form-control"></td>
		</tr>
		<tr>
			<td>图片排序</td>
			<td><input type="text" name="Form&#91;sort&#93;" value="" class="form-control"></td>
		</tr>
		<tr>
			<td>餐品LOGO(400*300最佳)</td>
			<td>
				<script id="editor" type="text/plain" style="width:50px;margin:5px 10px;height:0;float:left;"></script>
				<input type="hidden" name="Form&#91;img&#93;" id="img_url_one" value="" />
				<div id="img_preview_one" style="float:left;">
					<div class="alert alert-success" role="alert" style="float:left;margin:10px;"><strong><span class="glyphicon glyphicon-flag"></span>点击左侧图片图标上传图片:</strong>  图片大小不超过2m,格式为jpg,png,宽400高300为佳</div>
				</div>
			</td>
		</tr>
		<tr>
			<td>餐品展示图(400*300最佳)</td>
			<td>
				<script id="editor_arr" type="text/plain" style="width:50px;margin:5px 10px;height:0;float:left;"></script>
				<input type="hidden" name="Form&#91;img&#93;" id="img_url_arr" value="" />
				<div id="img_preview_arr" style="float:left;">
					<div class="alert alert-success" role="alert" style="float:left;margin:10px;"><strong><span class="glyphicon glyphicon-flag"></span>点击左侧图片图标上传多张图片:</strong>  图片大小不超过2m,格式为jpg,png,宽400高300为佳</div>
				</div>
			</td>
		</tr>
		
		</tbody>
	</table>
	<div class="aui_btn" >
		<a id="addBtn" class="btn btn-success"><i class="glyphicon glyphicon-plus"></i>确认添加</a>
	</div>
</form>


<script type="text/javascript">
	$("#addBtn").click(function() {
		//执行添加的ajax方法
	});


	//实例化第一个编辑器---上传单张图片
	var ue = UE.getEditor('editor', {
		toolbars: [["simpleupload"]],
	});

	//实例化第二个编辑器---上传多张图片
	var ue_arr = UE.getEditor('editor_arr', {
		toolbars: [["insertimage"]],
	});

</script>
	
</body>
</html>

演示和源文件的下载地址为： 点击进入演示或者下载

欢迎给我反馈你们更好的方法。多交流。。

别哭了，江湖不相信眼泪。