从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能...
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。(抄的...)
UEditor是非常好用的富文本web编辑器,而且全中文API和注释,方便学习和使用。特别是图片上传查看及涂鸦功能极为喜欢,但是有很多情况我们并不需要Web编辑器,而只需要图片上传。那么问题来了,提取图片上传哪家强.....
网上有很多图片上传的控件、插件。但都不是那么的完美,有的只有一张图片上传不包含批量上传,有的没有图片查看功能,还有的必须要flash的支持(ios系统就悲剧了),当然还有的不能跨语言,还有上传没有状态显示,当然还有客户体验不是太好, 浏览器兼兼容问题就更多了,在线涂鸦更是少之又少。而UEditor上传图片几乎解决了以上的问题。
废话不多说,走起。
一、从官网(http://ueditor.baidu.com/website/download.html)上下载UEditor选择开发版[1.4.2 .Net 版本],1、因为本人.Net。2、老的版本更稳定,新版本不支持ie8以下版本。关于其他语言的开发其实和.Net一样,主要是思路。
二、按照官网的说明文档(http://fex-team.github.io/ueditor/)把UEditor部署到VS(http://fex-team.github.io/ueditor/#server-net)中,保证UEditor可以正常使用,特别是图片上传功能。本文主要讲解单独提取UEditor图片上传功能,所以对UEditor的使用部署请参考官网(http://ueditor.baidu.com)。图是本人在VS中的目录结构。
三、修改config.json相关配置信息,这个配置主要关于上传以及查看图片的相关配置。
四、修改ueditor.config.js中的toolbars以及serverUrl ,我们只显示多图片单图片以及涂鸦的显示。
1
2
3
4
5
|
// 服务器统一请求接口路径
, serverUrl: URL + "../../Common/controller.ashx"
//工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的从新定义
, toolbars: [[ 'insertimage' , 'scrawl' , 'simpleupload' ]]
|
五、我们的主要内容是创建自己的通用提取上传图片的js文件(custom.js)和简单修改UEditor的ueditor.all.js文件。
1)、我们在页面中添加UEditor显示Div[editor-img]以及我们后面要处理上传完以后处理文件的名称[temp-img-list],还有初始化Ueditor。
1
2
|
$( "body" ).append( " <div id=\"editor-img\" style=\"display:none\"></div><div id=\"temp-img-list\" style=\"display: none\"></div>" );
var ue = UE.getEditor( 'editor-img' );
|
2)、我们可以把div id='editor-img'的display='block'显示,然后我们就可以在页面看到完整的包含图片上传多图片上传以及涂鸦的UEditor了。
3)、我们在页面Default.aspx中定义一个多图片上传按钮a标签,然后调用uploadImgs()方法,我们要做的就是点击a标签触发UEditor多图片上传按钮,我们查看源码可以到多图片上传按钮的div class 为edui-for-insertimage,如图。然后我们点击a标签就弹出图片上传的窗口了。
1
2
3
|
function uploadImgs() {
$( ".edui-for-insertimage .edui-button-body" )[0].click();
}
|
我们这时可以上传图片以及在线查看图片了。然后点击确认。。。。。。我们这时点击确认会发现会把图片加载到UEditor中,这并不是我们想要的,我们已经完成把图片上传到服务器了,现在只要知道我们上传了哪些图片或者查看图片时选择了哪些图片的名称就完成我们所需要的了。
4)、当点击确认时图片加载到编辑器中,编辑器的内容就会发生变化。我们可以监听编辑器内容的变化然后再获取编辑器中的内容进行分析处理即可获取图片名称。我们查看官方API可以找到contentChange事件(编辑器内容发生改变时会触发该事件),然后监听此事件。由于单个图片上传相比批量上传和涂鸦比较复杂,我们稍后再做详解。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
UE.getEditor( 'editor-img' ).addListener( 'contentChange' , function (editor) {
//获取编辑器中的内容(html 代码)
var img = UE.getEditor( 'editor-img' ).getPlainTxt();
if (img != "" ) {
//把编辑器中的内容放到临时div中,然后进行获取文件名称。
$( "#temp-img-list" ).html(img);
var array = new Array();
//循环获取文件名称
$( "#temp-img-list img" ).each(function () {
var src = $( this ).attr( "src" );
var name = src.replace( "/upload/image/" , "" );
array.push(name);
});
//清空编辑器中的内容,以便下一次添加图片。
UE.getEditor( 'editor-img' ).execCommand( 'cleardoc' );
//调用callbackImg获取懂图片名称
if ( typeof callbackImg === "function" ) {
eval( "callbackImg('" + array + "')" );
}
}
});
|
5)、我们自定义js方法callbackImg就可以获取到图片名称了
1
2
3
4
5
6
|
function callbackImg(imgName) {
var names = imgName.split( "," );
for ( var i = 0; i < names.length; i++) {
$( "#show-img-name" ).append($( "<div></div>" ).html($( "<a></a>" ).html(names[i]).attr( "href" , "/upload/image/" + names[i] + "" ).attr( "target" , "_blank" )));
}
}
|
6)、这样一个完整的批量图片上传查看的功能就完成了。同理我们可以添加涂鸦的功能,其实这这一步涂鸦的功能只要一步即可,自定义一个js方法insertScrawl(),然后调用insertScrawl即可完成涂鸦的功能。
1
2
3
|
function insertScrawl() {
$( '.edui-for-scrawl .edui-button-body' )[0].click();
}
|
到此为止,我们就完成了批量图片上传和涂鸦功能。
六、通读代码其实发现批量图片上传和涂鸦就是简单的模拟按钮调用,然后上传完图片或者选择完图片然后点击确认回调处理编辑器中的内容获取文件名称。但是单独上传图片会有一定的复杂度。
1)、我们用UEditor上传单个图片时会发现在编辑器中会有个等待的图片,当图片上传完毕以后会把等待图片换成我们上传的图片。
上传中...
上传完成以后。
2)、那么问题又来了,问题一,我们原来是监听编辑器中文本变化,然后获取其中的图片提取名称,这时我们获取的是等待的图片而不是我们真正上传的图片。问题二,这时上传并没有状态显示,如果图片过大或者网速不是很好的情况下,导致用户体验不是很好。
解决这些问题我们首先要找到图片刚开始上传和上传完毕的事件,还有要判断编辑器中的图片是否是等待的图片,反之就是我们上传的图片。
1)、查找源码我们可以在ueditor.all.js中找到上传开始和上传完成的事件,分别在24379行和24390行,在ueditor.all.js中分别调用js方法preUploadSingleImg()和uploadSingleImgCallback()。
2)、ueditor.all.js中修改代码(1,2,3行,23,24,25行)
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
|
<span style= "text-decoration: underline;" ><em><strong> </strong></em></span> if ( typeof preUploadSingleImg === "function" ) {
preUploadSingleImg();
}
function callback() {
try {
var link, json, loader,
body = (iframe.contentDocument || iframe.contentWindow.document).body,
result = body.innerText || body.textContent || '' ;
json = ( new Function( "return " + result))();
link = me.options.imageUrlPrefix + json.url;
if (json.state == 'SUCCESS' && json.url) {
loader = me.document.getElementById(loadingId);
loader.setAttribute( 'src' , link);
loader.setAttribute( '_src' , link);
loader.setAttribute( 'title' , json.title || '' );
loader.setAttribute( 'alt' , json.original || '' );
loader.removeAttribute( 'id' );
domUtils.removeClasses(loader, 'loadingclass' );
} else {
showErrorLoader && showErrorLoader(json.state);
}
//单独提取上传回调函数。
if ( typeof uploadSingleImgCallback === 'function' ) {
uploadSingleImgCallback();
}
|
3)、在自定义js custom.js中添加方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//单传图片开始上传,显示等待。
function preUploadSingleImg() {
if ($( "#loading" ).length > 0) {
$( "#loading" ).html( "<img src='/Scripts/ueditor/loading.gif'>" );;
}
}
//单传图片回调,隐藏等待图片
function uploadSingleImgCallback() {
if ($( "#loading" ).length > 0) {
$( "#loading" ).empty();
}
}
|
4)、最后要做的就是在页面上添加一个空的div id='loading'
5)、这样我们就解决了单独图片上传状态的问题,但是还有一个获取编辑器中上传图片的问题,这时要做两步,
1)、在custom.js中修改代码,编辑器内容改变事件中contentChange 判断是否是等待图片,如果是等待图片我们不做任何的处理即可。修改代码为
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
UE.getEditor( 'editor-img' ).addListener( 'contentChange' , function (editor) {
//获取编辑器中的内容(html 代码)
var img = UE.getEditor( 'editor-img' ).getPlainTxt();
if (img != "" ) {
//判断是否是单图片上传,如果是单传不做任何处理,等待回调函数再次调用。
if (img.indexOf( "loadingclass" ) == -1) {
//把编辑器中的内容放到临时div中,然后进行获取文件名称。
$( "#temp-img-list" ).html(img);
var array = new Array();
//循环获取文件名称
$( "#temp-img-list img" ).each(function () {
var src = $( this ).attr( "src" );
var name = src.replace( "/upload/image/" , "" );
array.push(name);
});
//清空编辑器中的内容,以便下一次添加图片。
UE.getEditor( 'editor-img' ).execCommand( 'cleardoc' );
//调用callbackImg获取懂图片名称
if ( typeof callbackImg === "function" ) {
eval( "callbackImg('" + array + "')" );
}
}
}
});
|
2)、我们在上传完事件中清空编辑器中的内容,然后编辑器又会调用 contentChange 事件,由于上传完毕以后编辑器中不是等待的图片而是我们真正上传的图片,这时只要按照多图片上传获取图片名称即可。修改方法uploadSingleImgCallback为
1
2
3
4
5
6
7
|
//单传图片回调,然后清理内容,在清理内容会自动调用contentChange事件,然后再获取上传文件的文件名。
function uploadSingleImgCallback() {
UE.getEditor( 'editor-img' ).execCommand( 'cleardoc' );
if ($( "#loading" ).length > 0) {
$( "#loading" ).empty();
}
}
|
6)、最后我自定义一个按钮调用方法uploadImg()即可弹出窗口选择图片,然后选择图片点击确定即可上传到服务器并获取到文件名称。
1
2
3
|
function uploadImg() {
$( ".edui-for-simpleupload input" ).click();
}
|
总结:我们选择就从UEditor中提取了多图片单图片上传以及涂鸦的功能。关于其他语言,逻辑一样的,只要更换不同的服务端代码即可。
以下为动画演示
转载于:https://www.cnblogs.com/jameslif/p/4045706.html
从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能...相关推荐
- 关于百度编辑器UEditor中图片手机端自适应,手机端展示的图片超出屏幕的问题
百度编辑器中添加的图片在手机端不能自适应问题 做网站经常要用到百度编辑器,页面的渲染我们一般用{$content}来显示,这时候在手机端就会出现首先宽度过宽超过手机尺寸的问题,用max-width:1 ...
- 推荐一个很好的富文本web编辑器UEditor
前天产品提了一个编辑器的bug,本人找是找到了问题的症结,就是不好改.框架是压缩兼混淆后的代码.查一下,好多年前的框架... 咨询了一个同事有关旧框架的事情,他也建议我升级编辑器并帮忙帮我找了UEdi ...
- 富文本转换html,在百度富文本编辑器UEditor中增加word转html的方法
1.需求 在一个项目中有个需求:复制word的内容到编辑器中.但是在复制过程中图片不能成功的复制过来,需要安装flash插件,但是吧又不能要求每个客户都安装上,这就比较麻烦了.所以考虑是不是可以把wo ...
- 将百度富文本编辑器(ueditor)中的内容转化为word文档格式
业务场景 需求:根据富文本中的内容生成对应的word文档进行预览和下载功能. 实现: 采用 POIFSFileSystem 类相关实现,能够准确的将文字.格式相关内容转换成功,但是对于在线的网络图片, ...
- python正则表达式提取字符串中的书名_使用python正则表达式从字符串中单独提取子字符串...
不是基于regex的解决方案.但却能做到.在a='''S LINC SHORT LEGAL TITLE NUMBER 0037 471 661 1720278;16;21 172 211 342 LE ...
- 百度编辑器ueditor,编辑内容过多时,工具栏不可见,不方便编辑或上传问题
百度有这个配置文件 ueditor.config.js 里面本来是有自动工具栏浮动到顶部,可以一直显示工具栏,但我测试,一直不能正常实现.功能不正常 //是否保持toolbar的位置不动,默认true ...
- 因为1024图片 AppIcon 图标包含了透明度导致app上传ios 代码报错
错误提示图片 错误原因: AppIcon 图标包含了透明度,才导致了包的上传失败. 后面我查看了AppIcon中添加的图片, 发现有一张1024 x 1024@1x的图标带有alpha透明度. 错误验 ...
- 机器学习入门-用KNN实现手写数字图片识别(包含自己图片转化)
Python实现KNN手写数字图片识别 1.数据集格式 2.把自己图片转化为数据集格式(把宽高是32像素x32像素的黑白图像转换为文本格式) 3.用数据集实现 4.运行结果 4.代码下载地址 KNN是 ...
- 【转】百度编辑器UEditor
Ueditor 1.4.3 单独调用上传图片,或文件功能 原文:https://www.cnblogs.com/sadkilo/p/5951336.html 第一步 引入ueditor的js包 第二步 ...
最新文章
- EhCache的特性
- Linux上安装php
- Bootstrap——table标签使用横向滚动条解决方案
- b+树阶怎么确定_你知道危险品运输是怎么包装的吗?
- linux adc测试程序,基于Qt4.7的ADC测试程序
- SpringCloudGateway 集成 nacos 整合实现动态路由_04
- 字符串includes_字符串操作大全:面试准备和日常编码所需一文打尽
- Android elevation的使用阴影
- 描述cookie,sessionstroage,localstrage的区别
- 计算机视觉 CS231n Course Introduction
- android 关闭进程 后台进程还在,为何有些安卓后台程序就是关不掉呢?
- 高等数学|微积分(上)知识点总结
- QQ邮箱中转站文件即将过期时如何转存到微云
- 18、DQL(分页查询:limt)
- VPS云主机怎么用?
- AI助力黑客,下一代防火墙将力不从心
- 澳大利亚麦考瑞大学计算机学院王岩教授招2023年入学博士研究生和双学位博士生
- --i和i--的区别
- VisionPro连接相机步骤
- 字幕批量翻译 字体定制