wangeditor富文本编辑器上传图片以及跨域问题解决

一、简介

wangeditor富文本编辑器是由js和css开发的富文本编辑器，轻量、简洁、高效

详细信息可以查看官网：http://www.wangeditor.com/

二、上传图片

本章内容主要讲使用js语言上传图片至服务器保存

1、第一步
调用官网静态资源
<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>2、第二步
const {createEditor,createToolbar}=window.wangEditor;//创建实例对象
const editorConfig={MENU_CONF:{},withCredentials:true,//定义该属性为ture表示允许跨域访问autofocus:false,scroll:false,maxLength:1200,minLength:200,
};
editorConfig.MENU_CONF['uploadImage']={//向编辑器中上传图片或者粘贴图片时触发该方法fieldName:'image',server:'http://192.168.178.44:8888/upImage',//后台服务器地址maxFileSize: 6 * 1024 * 1024, //maxNumberOfFiles: 200,// allowedFileTypes: ['image/*'],// timeout: 20 * 1000, // 5 秒
};

我们在前端上传图片时，编辑器会将图片上传至后台服务器进行保存我的地址为'http://192.168.178.44:8888/upImage'，并返回图片地址在编辑器上回显。返回数据开始必须为以下结构（上传成功、上传失败），否则会报错。

{"errno": 0, // 注意：值是数字，不能是字符串"data": {"url": "xxx", // 图片 src ，必须"alt": "yyy", // 图片描述文字，非必须"href": "zzz" // 图片的链接，非必须}
}

{"errno": 1, // 只要不等于 0 就行"message": "失败信息"
}

三、服务器端方法实现

@CrossOrigin
@ResponseBody
@RequestMapping(value = "/upImage")
public Object upImage(MultipartFile image) {String filePath = "D:\\IntelliJ IDEA 2019.3.3\\IDEA project\\retry\\src\\main\\resources\\static\\picture\\";String suffix = "";try {String originalFilename = image.getOriginalFilename();if (originalFilename.contains(".")) {suffix = originalFilename.substring(originalFilename.lastIndexOf("."));}String fileName=System.currentTimeMillis()+suffix;File targetFile = new File(filePath, fileName);if(!targetFile.exists()){targetFile.createNewFile();}try {image.transferTo(targetFile);} finally {}String url="http://localhost:8888/static/"+fileName;JSONObject jsonObject=new JSONObject();JSONObject jsonObject1=new JSONObject();System.out.println(url);jsonObject1.put("url",url);jsonObject.put("errno",0);jsonObject.put("data",jsonObject1);return jsonObject;} catch (Exception e) {JSONObject jsonObject=new JSONObject();jsonObject.put("errno",1);jsonObject.put("message","失败信息");return jsonObject;}}

CrossOrigin注释表示允许跨域访问

四、测试

使用编辑器需要启动后台服务

图片粘贴成功！

到服务器本地查看图片是否存在

前沿知识，制作不易！

本章至此结束！祝各位好运！

wangeditor富文本编辑器上传图片以及跨域问题解决相关推荐

使用wangEditor富文本编辑器上传图片和文字
"刘郎已恨蓬山远,更隔蓬山一万重" 序现在做的是从web端给眼镜端发送消息,其实就是web端把消息存到数据库,然后眼镜从数据库获取消息即可.现在在web端的输入框需要直接复制图片 ...
更加简洁易用——wangEditor富文本编辑器新版本发布
1. 前言 wangEditor富文本编辑器(www.wangEditor.com)从去年11月份发布,至今已经有将近10各月了.它就像一个襁褓中的小婴儿,在我的努力以及众多使用者的支持下不断摸索.成 ...
【wangEditor富文本编辑器】富文本三种使用方法，html使用富文本，html套vue脚手架使用富文本，vue使用富文本【简单易用，复制即用】
前言富文本编辑器功能是很多人都要使用的市面上有很多的编辑器可以供选择,但是很多编辑器会有点复杂,或者文档看起来难受. 我最近做了一个需求,是需要在html文件上写富文本编辑器. 但是我看了以前用的 ...
vue问题四：富文本编辑器上传图片
vue使用富文本编辑器上传图片: 我是用的是wangEditor 富文本编辑器 demo:http://www.wangeditor.com/ 1).安装依赖:npm install wangedit ...
wangeditor富文本编辑器集成配置
wangeditor富文本编辑器集成 <!DOCTYPE html> <html><head><meta charset="utf-8"& ...
集成wangEditor富文本编辑器
以下是JavaWeb项目集成wangEditor富文本编辑器,wangEditor是一个轻量级的富文本编辑器,优点是:集成速度快,容易上手.缺点是:相对于百度Ue功能较少,不过也基本满足了我们所需的功 ...
wangEditor富文本编辑器使用、编辑器内容转json格式
wangEditor富文本编辑器好处:可以吧文本编辑器中的内容转成json格式,方便app.小程序使用 wangEditor官网 wangEditor官方文档 wangEditor官方下载下载好之后 ...
wangEditor 富文本编辑器使用
wangEditor 富文本编辑器使用框架: react hooks 链接: 官方文档参考富文本编辑器组件 import '@wangeditor/editor/dist/css/style.cs ...
react html编辑器,wangEditor富文本编辑器+react+antd的使用
搜索热词 1.github上发现富文本编辑器: 2.结合react+antd的具体使用: 案例使用场景:MyModal为弹窗,弹窗显示编辑名称及描述.描述使用wangeditor富文本编辑器实现. ...