coding ++: kindeditor quickly build rich text editor (a)

This case is SpringBoot development demo

1, the official website to download the resource pack: http://kindeditor.net/down.php

2, write page (related to the introduction JS)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>kindeditor富文本编辑器</title>
    <link href="/kindeditor-4-1-10/themes/default/default.css" type="text/css" rel="stylesheet">

    <script type="text/javascript" charset="utf-8" src="/jquery-3.2.0.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/kindeditor-4-1-10/kindeditor-all-min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/kindeditor-4-1-10/lang/zh_CN.js"></script>
    <script type="text/javascript" charset="utf-8" src="/kindeditor-Own/kindeditor.js"></script>

</head>
<body>
　　<textarea id="itemAddForm" style="width:800px;height:300px;visibility:hidden;" name="desc"></textarea>
</body>
</html>

3, writing JS (/kindeditor-Own/kindeditor.js) to create an instance

itemAddEditor var;
 // after the page is initialized to perform this method 
$ (function () { 
    var TT = TTO = {
         // Editor parameters 
        kingEditorParams: {
             // specify the uploaded file parameter name 
            filePostName: "uploadFile" ,
             // specify the upload file requested URL. 
            uploadJson: '/ PIC / Upload' ,
             // upload type, respectively, Image, Flash, Media, File 
            the dir: "Image" 
        }, 
        createEditor: function (SELECT) { 
            return KindEditor.create (SELECT, TT. kingEditorParams); 
        } 
    }; 
    // create a rich text editor
    itemAddEditor = TTO.createEditor("#itemAddForm");
});

4, the preparation of background configuration virtual path (MyWebAppConfiguration)

Package com.editors.kindeditor.config; 

Import org.springframework.context.annotation.Configuration;
 Import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
 Import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; 
@Configuration 
public  class MyWebAppConfiguration the extends WebMvcConfigurerAdapter { 


    / ** 
     * add some mapping the virtual path 
     path * static resource paths and upload files 
     * 
     * @param Registry
      * / 
    @Override 
    public  void addResourceHandlers (ResourceHandlerRegistry Registry) {
        / ** 
         * @Description: on the path to the file can be configured to create a virtual path / Path / **, ie <img src = "/ Path / picName.jpg" /> will be able to directly reference pictures as long as the 
         * This is a picture the physical path "file: / + local picture address" 
         * / 
        registry.addResourceHandler ( "/Path/**").addResourceLocations("file:/C:/Users/lenovo/AppData/Local/Temp/tomcat-docbase .2975979620477460781.8080 / Upload / " );
         Super .addResourceHandlers (Registry); 
    } 

}

5, image upload service

package com.editors.kindeditor.controller;

import com.editors.utils.JsonUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.*;
import java.util.HashMap;
import java.util.Map;

@Controller
public class KindeditorController {

    @RequestMapping("/kindeditor")
     Public String KindEditor () {
         return "KindEditor / KindEditor" ; 
    } 

    / ** 
     * return complex types prone to browser compatibility issues 
     * Reason: 
     * The default behavior related with @ResponseBody 
     * String types can be played directly back to the page, and complex type can not be played back directly, you need to convert json 
     * / 
    @ RequestMapping ( "/ PIC / the Upload" ) 
    @ResponseBody 
    public String picUpload (MultipartFile uploadFile, the HttpServletRequest Request) { 
        the Map the Map = new new HashMap <> ();
         IF (! uploadFile .isEmpty ()) { 
            String saveFileName = uploadFile.getOriginalFilename();
            File saveFile = new File(request.getSession().getServletContext().getRealPath("/upload/") + saveFileName);
            if (!saveFile.getParentFile().exists()) {
                saveFile.getParentFile().mkdirs();
            }
            String path = "/Path/" + saveFileName;
            System.out.println("path={" + path + "}");
            try {
                BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(saveFile));
                out.write(uploadFile.getBytes());
                out.flush();
                out.close();
                map.put("error", 0);
                map.put("url", path);
            } catch (Exception e) {
                e.printStackTrace();
                map.put("error", 1);
                map.put("url", path);
                return "上传失败," + e.getMessage();
            }
        } else {
            map.put("error", 1);
            map.put("url", "upload failed because the file is empty." );
        } 
        return JsonUtils.objectToJson (the Map); 
    } 

}

6, the implementation of the results:

coding ++: kindeditor quickly build rich text editor (a)

Guess you like