ueditor单独调用图片上传

很多人在问ueditor,如何单独使用图片上传功能,但是网上没有一篇能用的文档,没办法,我刚好也需要这个功能,花了3天时间(本人水平太菜,哎)终于知道怎么处理了,发出来给大家共享:

效果如下:

页面效果:


点击上传图片:


上传图片,点确定:


获得上传图片的路径,并赋值给input


Ok,效果就这样。

具体实现也非常简单:

JS代码:注意放在页面的最下面,页面需要加载ueditor必备的2js,放在页面的头部:

ueditor/editor_all_min.js
ueditor/editor_config_big.js

var myEditorImage;
var d;
function upImage() {    
    d = myEditorImage.getDialog("insertimage");
    d.render();
    d.open();
}

myEditorImage= new UE.ui.Editor();
myEditorImage.render('myEditorImage');
myEditorImage.ready(function(){
	myEditorImage.setDisabled();
	myEditorImage.hide();//隐藏UE框体
	myEditorImage.addListener('beforeInsertImage',function(t, arg){
		alert(arg[0].src);//arg就是上传图片的返回值,是个数组,如果上传多张图片,请遍历该值。
		//把图片地址赋值给页面input,我这里使用了jquery,可以根据自己的写法赋值,到这里就很简单了,会js的都会写了。
		$("#abccc").attr("value", arg[0].src);
	});
});


调用的页面:

<tr>
	<th>上传图片</th>
	<td>
		<input type="text" id="abccc" />
		<input type="button" id="myEditorImagesss" οnclick="upImage();" value="上传图片"/>
	</td>
</tr>

Ok,搞定,非常简单。



  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值