wangEditor图片上传

1.图片上传

 var E = window.wangEditorvar editor = new E('#editorMenu','#editor')//开启debug模式editor.customConfig.debug = true;// 关闭粘贴内容中的样式editor.customConfig.pasteFilterStyle = false// 忽略粘贴内容中的图片editor.customConfig.pasteIgnoreImg = true// 使用 base64 保存图片//editor.customConfig.uploadImgShowBase64 = true// 上传图片到服务器editor.customConfig.uploadFileName = 'myFile'; //设置文件上传的参数名称editor.customConfig.uploadImgServer = 'upload'; //设置上传文件的服务器路径editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024; // 将图片大小限制为 3Meditor.customConfig.uploadImgMaxLength = 5;editor.customConfig.uploadImgHooks = {success: function (xhr, editor, result) {// 图片上传并返回结果，图片插入成功之后触发// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果},fail: function (xhr, editor, result) {// 图片上传并返回结果，但图片插入错误时触发// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果},error: function (xhr, editor) {// 图片上传出错时触发// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象}}

后台代码

@Data
public class WangEditor {private Integer errno; //错误代码，0 表示没有错误。private String[] data; //已上传的图片路径public WangEditor(String[] data) {super();this.errno = 0;this.data = data;}}

@RequestMapping(value = "/upload",method=RequestMethod.POST)@ResponseBodypublic WangEditor uploadFile(@RequestParam("myFile") MultipartFile multipartFile,HttpServletRequest request) {try {// 获取项目路径String realPath = request.getSession().getServletContext().getRealPath("");InputStream inputStream = multipartFile.getInputStream();String contextPath = request.getServletContext().getContextPath();// 服务器根目录的路径String path = realPath.replace(contextPath.substring(1),"");// 根目录下新建文件夹upload，存放上传图片String uploadPath = path + "upload";// 获取文件名称String filename = Calendar.getInstance().getTimeInMillis()+"image";// 将文件上传的服务器根目录下的upload文件夹File file = new File(uploadPath, filename);FileUtils.copyInputStreamToFile(inputStream, file);// 返回图片访问路径String url = request.getScheme() + "://" + request.getServerName()+ ":" + request.getServerPort() + "/upload/" + filename;String [] strs = {url}; WangEditor we = new WangEditor(strs);return we;} catch (IOException e) {logger.error("上传文件失败", e);}return null;}

2.多图片上传

editor.customConfig.customUploadImg = function (files, insert) {var data= new FormData();for(var i=0;i<files.length;i++){data.append("files",files[i]);}$.ajax({url:basePath + 'uploadFile/wangEditUploadImag',type: "POST",data: data,success:function(da){if(da.errno == 0){for(var j=0;j<da.data.length;j++){insert(da.data[j]);}}else{alert(da.msg);return;}}});
}

@RequestMapping(value = "/upload1",method=RequestMethod.POST)@ResponseBodypublic WangEditor uploadFile(@RequestParam("files") MultipartFile[] files,HttpServletRequest request) {try {List list = new ArrayList();for(MultipartFile multipartFile:files) {// 获取项目路径String realPath = request.getSession().getServletContext().getRealPath("");InputStream inputStream = multipartFile.getInputStream();//String contextPath = request.getServletContext().getContextPath();//logger.info(contextPath);// 服务器根目录的路径String path = realPath;// 根目录下新建文件夹upload，存放上传图片String uploadPath = path + "upload";// 获取文件名称String filename = Calendar.getInstance().getTimeInMillis()+"image";// 将文件上传的服务器根目录下的upload文件夹File file = new File(uploadPath, filename);FileUtils.copyInputStreamToFile(inputStream, file);// 返回图片访问路径String url = request.getScheme() + "://" + request.getServerName()+ ":" + request.getServerPort() + "/upload/" + filename;list.add(url);}//ArrayList<String> list=new ArrayList<String>();String[] strings = new String[list.size()];list.toArray(strings);WangEditor we = new WangEditor(strings);return we;} catch (IOException e) {logger.error("上传文件失败", e);}return null;}

wangEditor图片上传相关推荐

SSM开发书评网29：后台二：wangEditor图片上传；（主要内容是【wangEditor图片上传的文档要求】，【Spring MVC整合FileUpload组件，以实现文件上传功能】）
说明: (1)本篇博客内容说明:[在后台系统,我们点击新增按钮后,会弹出新增图书对话框]→[该对话框中,包含一个wangEditor富文本编辑器]→[wangEditor富文本编辑器中,可以包含图片] ...
阿里云oss云存储图片上传在wangEditor富文本编辑器上的集成
调用方式 html: <textarea name="newsinfo_content" id="editor" style="height:5 ...
wangEditor - 轻量级web富文本编辑器（可带图片上传）
业务需求: 通过后台编辑文章和图片,上传到前端界面,展示新闻消息模块.这个时候,需要一款简洁的编辑器,百度编辑器是最常用的一种,但是功能太过于复杂,而wangEditor - 轻量级web富文本编辑器 ...
wangEditor Java富文本的图片上传
上一篇 wangEditor的配置:https://blog.csdn.net/qq_35349982/article/details/103288508 这里主要讲 java后台我这里用的是七牛云 ...
wangeditor php上传本地图片,wangEditor 本地上传图片配置
let editor; new Vue({ el: '#app', data() { return {} }, mounted() { this.initEditor(); }, methods: { ...
【富文本】wangeditor编辑器简单使用（自定义图片上传）
一.wangeditor 官网二.引入 // 安装 npm i wangeditor --save// 使用 import E from "wangeditor" const e ...
vue中使用wangeditor富文本编辑器（含图片上传和回显）
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...
wangeditor php上传本地图片,配置wangEditor 实现图片上传
首先新建editor.vue文件,用于写配置项方法1:使用 base64 编码直接将图片插入到内容中优点 :配置简单 this.editor.customConfig.uploadImgShowB ...
使用wangEditor批量上传并且保证图片顺序
wangEditor文档环境搭建使用wangEditor SpringMVC 1.pom.xml <project xmlns="http://maven.apache.org/P ...

wangEditor图片上传

1.图片上传

2.多图片上传

wangEditor图片上传相关推荐

最新文章

热门文章