很多人在问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单独调用图片上传的更多相关文章

  1. UMEditor(Ueditor mini)修改图片上传路径

    UMEditor(Ueditor mini)修改图片上传路径 imageUp.ashx string pathbase = "/UpLoad/images/"; //保存文件夹在网 ...

  2. 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...

  3. 关于富文本编辑器—UEditor(java版)的使用,以及如何将UEditor的文件/图片上传路径改成绝对路径

    突然发现好久没写博客了,感觉变懒了,是要让自己养成经常写文章的习惯才行.既可以分享自己的所学,和所想,和大家一起讨论,发现自己的不足的问题. 大家可能经常会用到富文本编辑器,今天我要说的是UEdito ...

  4. ThinkPHP3.1.3 整合 UEditor百度编辑器 图片上传

    第一步.前端模板实例化百度编辑器 <js file='__ROOT__/Data/UEditor/ueditor.config.js' /> <js file='__ROOT__/D ...

  5. 百度开源富文本编辑器 UEditor配置:图片上传和文件上传独立使用方法

    使用UEditor编辑器自带的插件实现图片上传和文件上传功能,这里通过配置UEditor单独使用其内置的第三方插件swfupload来实现图片和文件的上传,通过对UEditor配置轻松实现图片批量上传 ...

  6. springmvc集成Ueditor插件实现图片上传2、

    一.下载Ueditor插件. 地址:http://ueditor.baidu.com/website/download.html 二.环境搭建. 具体可以参看http://fex.baidu.com/ ...

  7. PHP结合Ueditor并修改图片上传路径

    投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2016-10-16 我要评论 使用ueditor编辑器,附件默认在ueditor/php/upload/, 但是大家的附件地址的默认路 ...

  8. PHP结合Ueditor并修改图片上传路径 微信小程序 拼接域名显示图片

    前言 在使用UEditor编辑器时,一般我们都是需要修改默认的图片上传路径的,下面是我整理好的修改位置和方法供大家参考. 操作 Ueditor PHP版本本身自带了一套上传程序,我们可以在此基础中,找 ...

  9. vue“欺骗”ueditor,实现图片上传

    一.环境介绍 @vue/cli 4.3.1 webpack 4.43.0 ueditor1.4.3.3 jsp版 二.springboot集成ueditor,实现分布式图片上传 参考我的另一篇博客,& ...

随机推荐

  1. codeforces 466C. Number of Ways 解题报告

    题目链接:http://codeforces.com/problemset/problem/466/C 题目意思:给出一个 n 个数的序列你,问通过将序列分成三段,使得每段的和都相等的分法有多少种. ...

  2. codeforces 460C. Present 解题报告

    题目链接:http://codeforces.com/submissions/ywindysai 题目意思:有 n 朵花,每朵花都有一定的高度(第 i 朵花对应 ai),m 天之后要把这些花送给别人. ...

  3. linux应用之vsftp服务的安装及配置(centos)

    1.centos中vsftp服务的安装 方法1:rpm方式 #rpm –ivh vsftpd-2.0.5-10.el5.i386.rpm  安装rpm程序包(网上下载的rpm包) 方法2:yum方式 ...

  4. python3 分布式进程(跨机器)BaseManager(multiprocessing.managers)

    A机器负责发送任务和接受结果: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 #ta ...

  5. Windows_Program_Via_C_Translate_Win32编程的背景知识/基础知识_包括基本输入输出机制介绍

    Some Basic Background Story of The Win32 APIs Win32 API背景故事/背景知识 The Win32 application programming i ...

  6. py-day2-sys模块、os模块、运算符、列表、字典

    一.sys 模块 import sys print (sys.path)#打印环境变量 print(sys.aegv) #打印脚本的名字相对路径 print(sys.aegv)1 2 3 4 prin ...

  7. 12_tcp_ip相关概念

    java基础班  网络编程应该提过.大学学计算机或者是通信的对这些东西肯定比较熟一些.主机到网络层是跟硬件相关的一些协议了.上层协议得依赖下层的协议.也就是说它们得联合起来共同工作才能够把数据传输出去 ...

  8. 性能测试之Jmeter学习(二)

    一.Jmeter的基本操作 1.添加|移除测试元件 2.加载和保存测试元件 3.配置测试对中的测试元件 4.保存测试计划 5.运行测试计划 6.终止测试 7.错误报告 二.Jmeter体系结构 注释: ...

  9. 1.6-1.8 HBase表的物理模型

    一.HBase 物理模型 1. 1.Table中的所有行都按照row key的字典序排列: 2.Table在行的方向上分割为多个Region: 3.Region按天小分割的,每个表开始只有一个regi ...

  10. 多叉树结构:JSON数据解析(一)

    多叉树结构:JSON数据解析(一) 最近做一个实时数据搜索引擎的项目中,在项目架构的偏顶层需要写一个JSON数据解析的模块,由于目前JSON解析没有现成统一开源框架可以利用,目前只是手工利用com.a ...