如果想自定义控制图片上传完成、失败、超时时的操作,可通过配置 `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,自定义上传事件相关推荐

  1. Antd Upload 文件上传,自定义上传错误信息

    项目需求 使用antd Upload 组件 项目上要求前端对上传不符合标准的图片展示具体的错误信息 不设置action,即返回信息无response ,先在前端上传后调用接口保存 效果截图 主要是根据 ...

  2. wangeditor: 上传图片+上传视频+上传附件(自定义)完整使用

    wangeditor: 上传图片+上传视频+上传附件(自定义)完整使用 一:项目需求:①角色为管理员可以新增编辑文章 + ②点击可以看文章详情 +③ 角色为管理员可以修改编辑文章 二:效果: ①角色为 ...

  3. Ant Design Upload 自定义上传 customRequest

    本文章重点描述上传组件 Upload 的 customRequest 自定义文件上传逻辑的实现 目录 Upload 常用属性和方法 默认上传 customRequest 自定义上传 Upload 自定 ...

  4. 富文本wangeditor图片自定义上传及图片删除

    富文本编辑器的组件有很多像:百度的UEditor ,Vue-Quill-Editor,以及wangeditor. 组件的选择根据自己业务需求选择,本文选用的是wangeditor. 首先说一下业务需求 ...

  5. wangEditor在IE中截图上传问题(一)

    最近使用wangEditor富文本在IE中截图上传问题遇到了瓶颈,当时选用wangEditor富文本编辑器时,并没有想到上传图片时,浏览器兼容的问题,目前从wangEditor版本1到3,从2开始说支 ...

  6. laravel-admin引用wangEditor编辑器 使用二:上传视频/音频(2)

    完整的wangEditor.js代码 (function (global, factory) {typeof exports === 'object' && typeof module ...

  7. wangeditor富文本编辑器添加上传本地视频功能

    wangeditor.js全部代码(可选择复制) (function (global, factory) {typeof exports === 'object' && typeof ...

  8. wangEditor 修改 “视频”菜单,上传视频(替换原来的输入地址),三次修改

    参考文章:https://blog.csdn.net/m0_37885651/article/details/83660206 发现图标失效.做了些修改 效果图: 上传返回数据(单个视频上传): da ...

  9. antd Upload 自定义上传

    需求 由于使用antd 上传图片,在某些情况下,例如token 失效,导致上传图片错误,但是antd 组件始终会走onChange 事件 导致上传路径为空情况 解决办法 使用自定义上传 // 自定义上 ...

最新文章

  1. Make sure the device specification refers to a valid device
  2. JS 设计模式 四(单例)
  3. php表格之间设置间隔,html表格如何设置间距
  4. 牛客 - 小朋友你是否有很多问号(容斥+组合数学)
  5. 成都Uber优步司机奖励政策(3月9日)
  6. WCF basicHttpBinding之Message Security Mode
  7. linux 误删除mysql表能恢复吗,Linux误删数据恢复
  8. web前端(3)—— html标签及web页面结构
  9. Apache—DBUtils框架简介
  10. hibernate在不联网或者网络异常时不能解析配置文件
  11. Tomcat Insufficient space for shared memory file
  12. 阶段3 2.Spring_02.程序间耦合_1 编写jdbc的工程代码用于分析程序的耦合
  13. CentOS7.2下python安装pip-8.0.2管理
  14. 登陆服务器老出现“达到最大连接数解决方法
  15. Go程序设计语言读书笔记
  16. 批量查询数据的sql语句
  17. ArcMap下停靠栏的设计与实现
  18. 计算机组成原理<四>——数据的表示和运算(下)
  19. JavaFX入门(五):使用CSS样式美化你的UI控件
  20. PDF怎么合并?这些合并方法你该知道

热门文章

  1. 图书馆如何应用视频直播?
  2. 10-java程序的编译阶段
  3. C语言——迭代法求a的平方根——更新01
  4. 信息学奥赛一本通 1855:【09NOIP提高组】潜伏者 | OpenJudge NOI 1.7 11:潜伏者 | 洛谷 P1071 [NOIP2009 提高组] 潜伏者
  5. 填涂颜色(洛谷-P1162)
  6. 信息学奥赛C++语言:哥德巴赫猜想
  7. 19 MM配置-BP业务伙伴-定义编码范围
  8. 9 WM层面 临时仓储类型的仓位 主数据不存在
  9. python内置类型方法_浅析Python数字类型和字符串类型的内置方法
  10. android 游戏引擎 排行_4月旗舰手机性能排行榜:小米10 Pro第四,OPPO Ace2第五