Wangeditor rich text editor to upload pictures and solve cross-domain problems

I. Introduction

wangeditor rich text editor is a rich text editor developed by js and css, which is lightweight, concise and efficient

For more information, please check the official website: http://www.wangeditor.com/

Second, upload pictures

This chapter mainly talks about uploading pictures to the server using js language for saving

1. First stepCall the official website static resources2. Step 2const {createEditor,createToolbar}=window.wangEditor;//Create instance objectconst editorConfig={MENU_CONF:{},withCredentials:true,//Define this property as true to allow cross-domain accessautofocus: false,scroll: false,maxLength: 1200,minLength: 200,};editorConfig.MENU_CONF['uploadImage']={//This method is triggered when uploading or pasting an image to the editorfieldName:'image',server:'http://192.168.178.44:8888/upImage',//Background server addressmaxFileSize: 6 * 1024 * 1024, //maxNumberOfFiles: 200,// allowedFileTypes: ['image/*'],// timeout: 20 * 1000, // 5 seconds};

When we upload an image on the front end, the editor will upload the image to the backend server for saving. My address is 'http://192.168.178.44:8888/upImage', and the return image address will be echoed on the editor.The returned data must start with the following structure (upload success, upload failure), otherwise an error will be reported.

{"errno": 0, // Note: the value is a number, not a string"data": {"url": "xxx", // image src , must"alt": "yyy", // image description text, not required"href": "zzz" // link to the image, not required}}

{"errno": 1, // as long as not equal to 0"message": "Failure message"}

Three, server-side method implementation

@[email protected]@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","failure information");return jsonObject;}}

The CrossOrigin annotation indicates that cross-domain access is allowed

Four. Test

A background service needs to be started to use the editor

Image pasted successfully!

Go to the server to check if the image exists locally

Frontier knowledge is not easy to make!

This concludes this chapter!Good luck to you all!