ueditor单独调用图片上传
很多人在问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,搞定,非常简单。
ueditor单独调用图片上传的更多相关文章
- UMEditor(Ueditor mini)修改图片上传路径
UMEditor(Ueditor mini)修改图片上传路径 imageUp.ashx string pathbase = "/UpLoad/images/"; //保存文件夹在网 ...
- 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...
- 关于富文本编辑器—UEditor(java版)的使用,以及如何将UEditor的文件/图片上传路径改成绝对路径
突然发现好久没写博客了,感觉变懒了,是要让自己养成经常写文章的习惯才行.既可以分享自己的所学,和所想,和大家一起讨论,发现自己的不足的问题. 大家可能经常会用到富文本编辑器,今天我要说的是UEdito ...
- ThinkPHP3.1.3 整合 UEditor百度编辑器 图片上传
第一步.前端模板实例化百度编辑器 <js file='__ROOT__/Data/UEditor/ueditor.config.js' /> <js file='__ROOT__/D ...
- 百度开源富文本编辑器 UEditor配置:图片上传和文件上传独立使用方法
使用UEditor编辑器自带的插件实现图片上传和文件上传功能,这里通过配置UEditor单独使用其内置的第三方插件swfupload来实现图片和文件的上传,通过对UEditor配置轻松实现图片批量上传 ...
- springmvc集成Ueditor插件实现图片上传2、
一.下载Ueditor插件. 地址:http://ueditor.baidu.com/website/download.html 二.环境搭建. 具体可以参看http://fex.baidu.com/ ...
- PHP结合Ueditor并修改图片上传路径
投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2016-10-16 我要评论 使用ueditor编辑器,附件默认在ueditor/php/upload/, 但是大家的附件地址的默认路 ...
- PHP结合Ueditor并修改图片上传路径 微信小程序 拼接域名显示图片
前言 在使用UEditor编辑器时,一般我们都是需要修改默认的图片上传路径的,下面是我整理好的修改位置和方法供大家参考. 操作 Ueditor PHP版本本身自带了一套上传程序,我们可以在此基础中,找 ...
- vue“欺骗”ueditor,实现图片上传
一.环境介绍 @vue/cli 4.3.1 webpack 4.43.0 ueditor1.4.3.3 jsp版 二.springboot集成ueditor,实现分布式图片上传 参考我的另一篇博客,& ...
随机推荐
- 浅谈如何删除JSP编译后的空行
当你在客户端用view source看JSP生成的代码时,会发现有很多空行,他们是由< %...% >后的回车换行而生成的,也就是说每一行由< %...% >包含的JSP代码到 ...
- mapkeeper总结
1. mapkeeper下有个thrift目录,在该目录编译c++版本和java版本. C++版本需要系统安装thrift-0.9.2,而java版本需要系统安装thrift-0.8.0 2. thr ...
- Canvas HTML5
不支持的时候记得: <canvas id="stockGraph" width="150" height="150"> curr ...
- hdu-5621 KK's Point(dp+数学)
题目链接: KK's Point Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...
- (QA-LSTM)自然语言处理:智能问答 IBM 保险QA QA-LSTM 实现笔记.md
train集: 包含若干条与保险相关的问题,每一组问题对为一行,示意如下: 可分为四项,第三项为问题,第四项为答案: 1.build_vocab 统计训练集中出现的词,返回结果如下(一个包含3085个 ...
- 并不对劲的CTS2019
day0 没有C day1 t1:并不想简述题意 10分暴力走人 t2:有\(n\)个在\([1,D]\)内的均匀随机整数,问有多少的概率出现\(m\)对相同的 设\(f(i,j)\)表示考虑前\(i ...
- Python ip与数字的转换方式
例子:IP:192.168.1.10 方法一: In [1]: bin(192)Out[1]: '0b11000000' In [2]: bin(168)Out[2]: '0b10101000' In ...
- node之get与post
Get获取内容: var http=require('http'), util=require('util'),//util 提供常用函数集合 url=require('url'); http.cre ...
- eslintrc.js
此插件主要就是规范前端程序员编写JS的规范,让代码看上去很优雅,也便于后期人员的重构和维护. 因为是用vue的cli搭建项目工程,使用了eslintrc.js ,但是在写JS时发现,首字母缩进一直报错 ...
- kitti 数据集解析
1.KITTI数据集采集平台: KITTI数据采集平台包括2个灰度摄像机,2个彩色摄像机,一个Velodyne 3D激光雷达,4个光学镜头,以及1个GPS导航系统.坐标系转换原理参见click.KIT ...