您的位置:首页 > 产品设计 > UI/UE

ueditor单独调用图片上传

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

效果如下:

页面效果:



点击上传图片:



上传图片,点确定:



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



Ok,效果就这样。

具体实现也非常简单:

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

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" onclick="upImage();" value="上传图片"/>
</td>
</tr>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: