wangeditor上传图片回显

1:需要创建一个div来存放

<div id="editor—wrapper">
       <div id="toolbar-container"><!-- 工具栏 --></div>
       <div id="editor-container"><!-- 编辑器 --></div>
</div>

2:我们需要引入wangeditor他自己的js

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
    <script src="https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

3:然后就是js的代码

<script>
    let E = window.wangEditor;
    let editor = new E('#toolbar-container')
    let $text1 = $('#editor-container');
    editor.customConfig.onchange = function (html) {
        // 监控变化，同步更新富文本内容到 textarea
        // console.log(editor.txt.html())
        $text1.val(html);
    }
    editor.customConfig.uploadImgMaxSize = 1 * 1024 * 1024
    editor.customConfig.uploadImgServer = 'userContribute';	//自定义上传图片（改成自己写的图片上传方法的路径）
    editor.customConfig.uploadFileName = 'file';	//自定义文件名
    editor.customConfig.maxNumberOfFiles = 2;
    editor.customConfig.uploadImgHooks = {
        success: function (xhr, editor, result) {
            // console.log(result);
            // 图片上传并返回结果，图片插入成功之后触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        customInsert: function (insertImg, result) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            let url = result['url'];
            insertImg(url)
            // result 必须是一个 JSON 格式字符串！！！否则报错
        }
    }
    editor.customConfig.customAlert = function (info) {	//关闭默认提示信息
        // info 是需要提示的内容
        //alert('自定义提示：' + info)
    }
    // 或者 var editor = new E( document.getElementById('content') )
    editor.create();
    $text1.val(editor.txt.html());
</script>

4:然后是后台的代码

/**
     * 用户投稿文件显示存放
     * @param
     * @param request
     * @return
     */
    @PostMapping("/**/userContribute")
    @ResponseBody
    private ImgInfo  userContribute(@RequestBody MultipartFile file, HttpServletRequest request) {
        ImgInfo imgInfo = new ImgInfo();
        System.out.println("进来了吗");
        Random random = new Random();
        int intRandom = random.nextInt(50000000)+1;
        System.out.println("------>>>"+file);
        String path = request.getSession().getServletContext().getRealPath("/image/contribute");
        boolean multipartContent = ServletFileUpload.isMultipartContent(request);
        System.out.println(multipartContent+"------->");
        //将上传的文件保存
        try {
            //1:获得当前上传文件的输入流
            InputStream inputStream = file.getInputStream();
            //2:获得当前上传文件的输出流\
            //2.1:把路径分出来定义
            String pathFile = path + "\\" +intRandom+file.getOriginalFilename();
            FileOutputStream fileOutputStream = new FileOutputStream(pathFile);//文件名字
            System.out.println(pathFile+"地址");
//            String value = "http://localhost/dynamic/image/contribute/" +file.getOriginalFilename();
            String value = "../image/contribute/" +intRandom+file.getOriginalFilename();
            String[] values = { value };
            imgInfo.setError(0);
            imgInfo.setUrl(values);
            System.out.println(imgInfo);
            //3:执行文件拷贝到存放的位置
            IOUtils.copy(inputStream, fileOutputStream);
            //4:关闭流资源
            inputStream.close();
            fileOutputStream.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return imgInfo;
    }

5:因为imgInfo是我自己定义的一个类

public class ImgInfo implements Serializable {
    private Integer error;
    private String[] url;

    public Integer getError() {
        return error;
    }

    public void setError(Integer error) {
        this.error = error;
    }

    public String[] getUrl() {
        return url;
    }

    public void setUrl(String[] url) {
        this.url = url;
    }

    @Override
    public String toString() {
        return "ImgInfo [error=" + error + ", url=" + Arrays.toString(url) + "]";
    }
}

6:然后我们看看效果和样式吧!