Detailed description of using Rich Text Editor to upload images, text editor to upload images

Detailed description of using Rich Text Editor to upload images, text editor to upload images

Rich Text Editor uploads images

1. Import js of kindeditor

<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script><script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>

2. Associate kindeditor with a text domain textarea, that is, use textarea to initialize a kindeditor object

ItemAddEditor = TAOTAO. createEditor ("# itemAddForm [name = desc]"); // initialize Category Selection and image Uploader TAOTAO. init ({fun: function (node) {TAOTAO. changeItemParam (node, "itemAddForm ");}});

3. Set the parameters to be uploaded

Var TT = TAOTAO = {// editor parameter kingEditorParams: {// specify the File Upload parameter name filePostName: "uploadFile", // specify the url of the file upload request. UploadJson: '/pic/upload', // upload type, which are image, flash, media, file dir: "image"}, init: function (data) {// initialize the Image Upload Component this. initPicUpload (data); // initialize and select the category component this. initItemCat (data) ;}, // initialize the Image Upload Component initPicUpload: function (data) {$ (". picFileUpload "). each (function (I, e) {var _ ele = $ (e); _ ele. siblings ("div. pics "). remove (); _ ele. after ('\ <div class = "pics"> \ <ul> </ul> \ </div>'); // if (data & data. pics) {var imgs = data. pics. split (","); for (var I in imgs) {if ($. trim (imgs [I]). length> 0) {_ ele. siblings (". pics "). find ("ul "). append ("<li> <a href = '" + imgs [I] + "'target =' _ blank '>  </a> </li> ");}}} // bind a click event to the upload image button $ (e ). click (function () {var form = $ (this ). parentsUntil ("form "). parent ("form"); // open the Image Upload window KindEditor. editor (TT. kingEditorParams ). loadPlugin ('multiimage', function () {var editor = this; editor. plugin. multiImageDialog ({clickFn: function (urlList) {var imgArray = []; KindEditor. each (urlList, function (I, data) {imgArray. push (data. url); form. find (". pics ul "). append ("<li> <a href = '" + data. url + "'target = '_ blank'>  </a> </li>") ;}); form. find ("[name = image]"). val (imgArray. join (","); editor. hideDialog ();}});});});});

Server code

Public Map uploadPicture (MultipartFile uploadFile) {Map resultMap = new HashMap <> (); try {// generate a new file name // remove the original file name String oldName = uploadFile. getOriginalFilename (); // generate a new file name // UUID. randomUUID (); String newName = IDUtils. genImageName (); newName = newName + oldName. substring (oldName. lastIndexOf (". "); String imagePath = new DateTime (). toString ("/yyyy/MM/dd"); // upload the image boolean result = FtpUtil. uploadFile (FTP_ADDRESS, FTP_PORT, FTP_USERNAME, FTP_PASSWORD, FTP_BASE_PATH, imagePath, newName, uploadFile. getInputStream (); System. out. println ("result =" + result); if (! Result) {resultMap. put ("error", 1); resultMap. put ("message", "File Upload Failed"); System. out. println ("hh"); return resultMap;} resultMap. put ("error", 0); resultMap. put ("url", IMAGE_BASE_PATH + imagePath + "/" + newName); return resultMap;} catch (IOException e) {resultMap. put ("error", 1); resultMap. put ("message", "File Upload exception"); return resultMap ;}}

Note: the format of the json string returned by the server is {error: 0 | 1, message | url}, where error is an integer and not a string. If the image is written as a string, it can be uploaded to the server normally, but it cannot be displayed in the browser.

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!