背景:
公司需要添加图文资料,于是开搞umeditor,因为新换的ng7框架,很多组件还不熟悉,在摸索中。
开始一直显示不出来编辑器界面,通过一番百度,发现文章寥寥几篇,好在有一篇文章给到帮助,需要去ueditor官网下载文件并放入项目,照做之后,富文本编辑器可以正常加载并初步使用了。(开始一直以为npm引入就够用了,囧)
可以用排版之后,就到第二个重点,上传图片了,因为以前配过ng1的umeditor,当时就各种资料不清晰搞的很费劲,两三天才搞定,后来没做笔记基本忘完了。
上传图片第一件事就是修改图片上传url,改完之后,发现,官方默认的action事件,报400,跟成功的上传对比后发现是没有传入file参数,然后就去找解决方法。
其中一篇文章说是修改上传方法,将action改为ajax上传,翻看源码发现拖动上传图片就是用的ajax,一番尝试后,终于上传成功。
操作内容
注释submit事件
创建xhr创建formdata 为formdata添加file 被上传文件(image.js:234行)
将返回结果用json解析(这里看实际情况,主要是为了方便使用返回内容的参数)
然后传入me.uploadComplete(res)
去除uploadComplete里的eval方法
uploadComplete成功的话触发Base.callback()
坑点
callback里最外层的判断要改,默认判断state == ‘SUCCESS’
这里是因为公司后端返回了我们公司的响应结构,没有按照ueditor想要的格式返回。
解决方法:
1、把对应需要的值一个一个正确的给到。
2、把拿到的response改成ueditor想要的格式再传给callback。
额外的小坑
取上传图片时为了方便给input写了id,实际每次上传成功后是会销毁上次的input,导致id选择器在连续上传图片时被销毁而取不到文件。
解决方案:
直接用jq找input:file的第一个,拿图片内容即可,无论传多少图片都行了。
参考资料:
https://www.cnblogs.com/guofan/p/10065138.html
https://www.cnblogs.com/tangchun/p/8796166.html
最终效果: