ueditor单独调用图片上传
2024-09-04 16:13:37
很多人在问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>
Ok,搞定,非常简单。
最新文章
- MIT 6.828 JOS学习笔记13 Exercise 1.10
- iOS 实现转盘的效果
- ffmpeg-20160526-git-bin
- [转]SharePoint开发中可能用到的各种Context(上下文)
- HDU1850 Being a Good Boy in Spring Festival(博弈)
- 【风马一族_C】c语言版,在2到n中寻找出所有的素数
- rand.Read() 和 io.ReadFull(rand.Reader) 的区别?
- 利用Node.js实现模拟Session验证的登陆
- Call U
- 比较Java中几个常用集合添加元素的效率
- java操作Redis缓存设置过期时间
- 关不掉的小姐姐程序python tkinter实现 学习---打包教程
- IDEA Git 配置及使用
- CentOS7最小化安装连接到网络的解决方案
- java.net.SocketException四大异常解决方案---转
- windows批处理学习---01
- 64_c1
- 组件与.NET互操作
- springsource-tool-suite下载(sts)
- HackerRank Super Six Substrings dp
热门文章
- hdu 2188 悼念512汶川大地震遇难同胞——选拔志愿者(Bash Game)
- python cassandra 创建space table并写入和查询数据
- 页面渲染——页面合成(composition)的优化
- 【转载】 C++中回车换行(\n\r)和换行(\r)的区别
- hadoop2.X集群安装与应用
- Ubuntu16.04 + cuda9.0 + cudnn7.1.4 + tensorflow安装
- 杂项:SVN 常用方法
- 使用weui
- HDOj-1425
- jsoup解析xml某片段的问题