<!DOCTYPE html>
<html>
<head>
<title>we234234</title>
<script src="ueditor.config.js"></script>
<script src="ueditor.all.min.js"></script>
<script src="lang/zh-cn/zh-cn.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<style>
/*上传*/
.up-box{margin: 10px 0;border: 1px solid #eee;
min-height:220px;
/*display: none;*/}
.up-box ul{padding: 0px;}
.up-box li{ 120px; height: 200px;
float: left; margin: 10px;}
.up-box li .img{ 120px;
height:120px; overflow: hidden;}
.up-box .img img{ 100%; vertical-align:bottom;}
.up-box li .input{margin: 5px 0; 100%; border: 1px solid #eee; padding: 5px; }
.up-box li .delete{cursor: pointer; color: #eee}
.up-box li .delete:hover{color: #5cb85c }
.clearfix{clear:both}
</style>
</head>
<body>
<!--上传按钮-->
<button type="button" onClick="upImage()">上传</button>
<!--li 指针位置-->
<input type="" id="li-pointer" value="">
<hr>
<!-- 加载默认图片 json格式 -->
<div>加载默认的图片</div>
<div id="thumb_str">[{"src":"/ueditor/php/upload/image/20170526/1495787497215115.jpg","title":"123","top":1},{"src":"/ueditor/php/upload/image/20170526/1495789723119809.jpg","title":"undefined","top":0}]</div>
<!-- 图片显示框-->
<div class="up-box clearfix">
<ul id="up-append">
</ul>
</div>
<!-- 隐藏编辑器 -->
<div id="up_edit" style="display: none;" title="隐藏的编辑器"></div>
</body>
<script>
var up = UE.getEditor('up_edit');
$(document).ready(function(){
/*初始化相册内容*/
// 获取相册内容并且转数组格式
$thumb_str = $('#thumb_str').text();
var arg = eval('(' + $thumb_str + ')');
DivShow(arg);
// 初始化指针位置
$l = $("#up-append li").length;
$("#li-pointer").val($l);
});
//弹出图片上传的对话框
function upImage()
{
var myImage = up.getDialog("insertimage");
myImage.open();
}
//监听图片上传
up.addListener('beforeInsertImage', function (t,arg)
{
DivShow(arg);
});
// 图片格式
function DivShow(arr){
var $str='';
// 数组长度
var $arr_length = arr.length;
// 获取li指针位置
$length = Number($("#li-pointer").val());
for(i=0;i<$arr_length;i++){
// 指针长度
$ii = $length+i;
//alert($ii);
$str += "<li class='list_"+$ii+"'>";
$str+= "<input name='up-thumb[]' id='up-thumb-"+i+"' type='hidden' value='"+arr[i].src+"'>";
$str +="<div class='img'><img src='"+arr[i].src+"' /></div>";
$str +="<input name='up-title[]' id='up-title-"+i+"' value='"+arr[i].title+"' class='input' placeholder='请设置标题'>"
if(arr[i]['top'] ==1){
$str +="<label class='pull-left'><input name='up-top' type='radio' value='"+$ii+"' checked>设置封面 </label>"
}else{
$str +="<label class='pull-left'><input name='up-top' type='radio' value='"+$ii+"'/>设置封面 </label>"
}
$str +="<label class='pull-right' class='delete'><a href='javascript:dele_list("+$ii+")'>删除</a> </label>";
$str += "</li>";
}
$("#up-append").append($str)
// 重新生成指针位置
$t = parseInt($length) + $arr_length;
$("#li-pointer").val($t);
}
// 删除
function dele_list($id){
$(".list_"+$id).remove();
}
</script>
</html>