wangeditor上传html,自定义上传事件
如果想自定义控制图片上传完成、失败、超时时的操作,可通过配置 `editor.config.uploadImgFns.onload` `editor.config.uploadImgFns.ontimeout` `editor.config.uploadImgFns.onerror` 三个事件来自定义。
另外,在自定义的上传事件中,可通过`editor.uploadImgOriginalName`来获取图片名称(例如用作``的`alt`属性),注意看代码注释。
**注意,`ontimeout`和`onerror`两个事件在IE8、9下不起作用**
----
代码示例如下:
```html
请输入内容...
var editor = new wangEditor('div1');
// 自定义load事件
editor.config.uploadImgFns.onload = function (resultText, xhr) {
// resultText 服务器端返回的text
// xhr 是 xmlHttpRequest 对象,IE8、9中不支持
// 上传图片时,已经将图片的名字存在 editor.uploadImgOriginalName
var originalName = editor.uploadImgOriginalName || '';
// 如果 resultText 是图片的url地址,可以这样插入图片:
editor.command(null, 'insertHtml', '');
// 如果不想要 img 的 max-width 样式,也可以这样插入:
// editor.command(null, 'InsertImage', resultText);
};
// 自定义timeout事件
editor.config.uploadImgFns.ontimeout = function (xhr) {
// xhr 是 xmlHttpRequest 对象,IE8、9中不支持
alert('上传超时');
};
// 自定义error事件
editor.config.uploadImgFns.onerror = function (xhr) {
// xhr 是 xmlHttpRequest 对象,IE8、9中不支持
alert('上传错误');
};
editor.create();
```
----
以下代码,是wangEditor.js中定义的。**仅供参考,请勿直接复制粘贴来用**。
```js
var editor = this;
var fns = editor.config.uploadImgFns; // editor.config.uploadImgFns = {} 在config文件中定义了
// -------- 插入图片的方法 --------
function insertImg(src) {
var img = document.createElement('img');
img.onload = function () {
var html = '';
editor.command(null, 'insertHtml', html);
E.log('已插入图片,地址 ' + src);
img = null;
};
img.onerror = function () {
E.error('使用返回的结果获取图片,发生错误。请确认以下结果是否正确:' + src);
img = null;
};
img.src = src;
}
// -------- 定义load函数 --------
fns.onload || (fns.onload = function (resultText, xhr) {
E.log('上传结束,返回结果为 ' + resultText);
if (resultText.indexOf('error|') === 0) {
// 提示错误
E.warn('上传失败:' + resultText.split('|')[1]);
alert(resultText.split('|')[1]);
} else {
E.log('上传成功,即将插入编辑区域,结果为:' + resultText);
// 将结果插入编辑器
insertImg(resultText);
}
});
// -------- 定义tiemout函数 --------
fns.ontimeout || (fns.ontimeout = function (xhr) {
E.error('上传图片超时');
alert('上传图片超时');
});
// -------- 定义error函数 --------
fns.onerror || (fns.onerror = function (xhr) {
E.error('上传上图片发生错误');
alert('上传上图片发生错误');
});
```
wangeditor上传html,自定义上传事件相关推荐
- Antd Upload 文件上传,自定义上传错误信息
项目需求 使用antd Upload 组件 项目上要求前端对上传不符合标准的图片展示具体的错误信息 不设置action,即返回信息无response ,先在前端上传后调用接口保存 效果截图 主要是根据 ...
- wangeditor: 上传图片+上传视频+上传附件(自定义)完整使用
wangeditor: 上传图片+上传视频+上传附件(自定义)完整使用 一:项目需求:①角色为管理员可以新增编辑文章 + ②点击可以看文章详情 +③ 角色为管理员可以修改编辑文章 二:效果: ①角色为 ...
- Ant Design Upload 自定义上传 customRequest
本文章重点描述上传组件 Upload 的 customRequest 自定义文件上传逻辑的实现 目录 Upload 常用属性和方法 默认上传 customRequest 自定义上传 Upload 自定 ...
- 富文本wangeditor图片自定义上传及图片删除
富文本编辑器的组件有很多像:百度的UEditor ,Vue-Quill-Editor,以及wangeditor. 组件的选择根据自己业务需求选择,本文选用的是wangeditor. 首先说一下业务需求 ...
- wangEditor在IE中截图上传问题(一)
最近使用wangEditor富文本在IE中截图上传问题遇到了瓶颈,当时选用wangEditor富文本编辑器时,并没有想到上传图片时,浏览器兼容的问题,目前从wangEditor版本1到3,从2开始说支 ...
- laravel-admin引用wangEditor编辑器 使用二:上传视频/音频(2)
完整的wangEditor.js代码 (function (global, factory) {typeof exports === 'object' && typeof module ...
- wangeditor富文本编辑器添加上传本地视频功能
wangeditor.js全部代码(可选择复制) (function (global, factory) {typeof exports === 'object' && typeof ...
- wangEditor 修改 “视频”菜单,上传视频(替换原来的输入地址),三次修改
参考文章:https://blog.csdn.net/m0_37885651/article/details/83660206 发现图标失效.做了些修改 效果图: 上传返回数据(单个视频上传): da ...
- antd Upload 自定义上传
需求 由于使用antd 上传图片,在某些情况下,例如token 失效,导致上传图片错误,但是antd 组件始终会走onChange 事件 导致上传路径为空情况 解决办法 使用自定义上传 // 自定义上 ...
最新文章
- Make sure the device specification refers to a valid device
- JS 设计模式 四(单例)
- php表格之间设置间隔,html表格如何设置间距
- 牛客 - 小朋友你是否有很多问号(容斥+组合数学)
- 成都Uber优步司机奖励政策(3月9日)
- WCF basicHttpBinding之Message Security Mode
- linux 误删除mysql表能恢复吗,Linux误删数据恢复
- web前端(3)—— html标签及web页面结构
- Apache—DBUtils框架简介
- hibernate在不联网或者网络异常时不能解析配置文件
- Tomcat Insufficient space for shared memory file
- 阶段3 2.Spring_02.程序间耦合_1 编写jdbc的工程代码用于分析程序的耦合
- CentOS7.2下python安装pip-8.0.2管理
- 登陆服务器老出现“达到最大连接数解决方法
- Go程序设计语言读书笔记
- 批量查询数据的sql语句
- ArcMap下停靠栏的设计与实现
- 计算机组成原理<四>——数据的表示和运算(下)
- JavaFX入门(五):使用CSS样式美化你的UI控件
- PDF怎么合并?这些合并方法你该知道
热门文章
- 图书馆如何应用视频直播?
- 10-java程序的编译阶段
- C语言——迭代法求a的平方根——更新01
- 信息学奥赛一本通 1855:【09NOIP提高组】潜伏者 | OpenJudge NOI 1.7 11:潜伏者 | 洛谷 P1071 [NOIP2009 提高组] 潜伏者
- 填涂颜色(洛谷-P1162)
- 信息学奥赛C++语言:哥德巴赫猜想
- 19 MM配置-BP业务伙伴-定义编码范围
- 9 WM层面 临时仓储类型的仓位 主数据不存在
- python内置类型方法_浅析Python数字类型和字符串类型的内置方法
- android 游戏引擎 排行_4月旗舰手机性能排行榜:小米10 Pro第四,OPPO Ace2第五