Use Baidu Umeditor Rich Text Editor, modify the custom image upload, modify the source code

Rich Text editor, not much to say, this everyone should have used, as to what version of the use, it is divided into a variety of

CKEditor: Long ago called FCK, that time also used, now renamed, a more popular plug-in, many foreign companies in use

Ueditor: Baidu developed plug-in, lite version is UM

Easyui Editor: With Easyui all understand, basically definitely use

Other Rich text editor will not say, the first two small series I used more

Originally I was more inclined to ckeditor, but this plugin does not support image upload, the image function can only link the past, but not in the control itself upload, so chose the Umeditor

Why Choose Um, do not choose UE, actually all the same, um streamlined a lot, and smaller, UE function too much and a lot of things can not be used

So first of all say upload it, introduce JS what do not say, the internet has

To upload a picture, first define a static directory, as follows:

Take a look at the structure of the Baidu directory

The first box is Baidu's own upload, you can not use him, his own custom upload, small series with the SPRINGMVC + Fastdfs image server, as long as the modified address can be directly uploaded, related articles can refer to my previous blog

Open Umeditor.config.js This file, this is the UM profile, you can customize a lot of things

Overwrite the original ImageUrl, modify the image upload interface you are using in your own project, note that it must be supported by Ajax asynchronous upload

So good, now start the project test, picture upload is no problem, but the picture will be problematic, because the return of the JSON and Baidu format does not match

What to do, 2 ways to fit your return data format

or directly modify the JS source code Baidu

I used the second approach, after all, my own data format is the most clear

Open the Image.js under this path.

/danger-manager-web/src/main/webapp/web-inf/umeditor1_2_2-utf8-jsp/dialogs/image/image.js

Find the following methods

This method is executed after success, callback is used to display the contents of the picture, I directly modify the callback, change the data format

Modify the href in the image to show the image eventually

Use Baidu Umeditor Rich Text Editor, modify the custom image upload, modify the source code