一、引入kindeditor

图片.png

二、页面中引入kindeditor

    <link rel="stylesheet" href="../admin/css/public.css">
    <link rel="stylesheet" href="../kindeditor/themes/default/default.css"/>
    <link rel="stylesheet" href="../kindeditor/plugins/code/prettify.css"/>
    <script charset="utf-8" src="../kindeditor/kindeditor-all.js"></script>
    <script charset="utf-8" src="../kindeditor/lang/zh-CN.js"></script>
    <script charset="utf-8" src="../kindeditor/plugins/code/prettify.js"></script>
    <script src="../admin/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>

三、配置富文本信息

uploadJson:这里写你自己的文件上传的接口
fileManagerJson:读取图片库的路径(读取哪个路径的图片)

 $(function () {
        /*初始化富文本编辑器*/
        var editor1;
        KindEditor.ready(function (K) {
            editor1 = K.create('#editor_id', {
                    //参数配置
                    width: '100%',
                    allowFileManager: true, //浏览图片空间
                    filterMode: false, //HTML特殊代码过滤
                    filePostName: "imgFile",//@RequestParam(value = "imgFile", controller中绑定的值；数据类型: String  默认值: imgFile
                    uploadJson: '/upload/kindimage',//这里写你自己的文件上传的接口
                    fileManagerJson: '../files/',//读取图片库的路径(读取哪个路径的图片)
                    allowFileManager: true,
                    minHeight: '1000',
                    resizeType: 1,//禁止拉伸，1可以上下拉伸，2上下左右拉伸
                    filterMode: true,//true时过滤HTML代码，false时允许输入任何代码。
                    afterBlur: function () {
                        this.sync();
                    }, //编辑器失去焦点(blur)时执行的回调函数（将编辑器的HTML数据同步到textarea）

                    afterUpload: function () { //上传文件后执行的回调函数
                        this.sync();
                    },
                    itmes: [
                        'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'multiimage',
                        'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                        'anchor', 'link', 'unlink', '|', 'about'
                    ],

                }
            );

        });
    });

四、后台的图片上传的接口

package com.zhonggao.webxz.UploadController;

import cn.hutool.json.JSONObject;
import com.zhonggao.webxz.untils.FileUtil;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.*;
import java.util.ArrayList;
import java.util.List;
/*富文本编辑器上传图片的接口*/
@RestController
public class UploadKindImg {
    @Value("${web.upload-path}")
    private String location;
    @ResponseBody
    @PostMapping("/upload/kindimage")
    public JSONObject uploadKind(@RequestParam(value = "imgFile", required = true) MultipartFile[] files) {
       // System.out.println("已走上传接口——————————————————————————————");
        JSONObject jsonObject=new JSONObject(  );
        if(files != null){
            String url="";
            File targetFile = new File(location + "/files/");
            if (!targetFile.exists()) {
                targetFile.mkdirs();
            }
            for (int i = 0; i < files.length; i++) {
                MultipartFile multipartFile = files[i];
                if (!multipartFile.isEmpty()) {
                    try {
                        //校验是否图片
                        Boolean aBoolean = FileUtil.checkImg(multipartFile);
                        if (!aBoolean) {
                            jsonObject.put( "message","上传失败" );
                            jsonObject.put( "error",1);
                            return jsonObject;
                        }
                        String random = System.currentTimeMillis() + "-"+Math.round(Math.random()*1000+1);
                        String suf=multipartFile.getOriginalFilename().substring(multipartFile.getOriginalFilename().indexOf("."),multipartFile.getOriginalFilename().length());

                        File file = new File(location + "/files/" + random + suf);
                        BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(file));
                        out.write(multipartFile.getBytes());
                        out.flush();
                        out.close();
                        url=  random + suf ;
                    } catch (FileNotFoundException e) {
                        e.printStackTrace();
                        jsonObject.put( "message","上传失败" );
                        jsonObject.put( "error",1);
                        return jsonObject;
                    } catch (IOException e) {
                        e.printStackTrace();
                        jsonObject.put( "message","上传失败" );
                        jsonObject.put( "error",1);
                        return jsonObject;
                    } catch (NullPointerException e) {
                        e.printStackTrace();
                        jsonObject.put( "message","上传失败" );
                        jsonObject.put( "error",1);
                        return jsonObject;
                    }
                }
            }
            //上传成功
            jsonObject.put( "error",0 );
            jsonObject.put( "url","../files/"+url );
           /* System.out.println(url);
            System.out.println(jsonObject);*/
            return jsonObject;
        }else{
            jsonObject.put( "message","上传失败" );
            jsonObject.put( "error",1);
            return jsonObject;

        }
    }
}