1、初始化编辑器以及自定义配置

<template>
  <div>
    <div ref="div" style="text-align:left"></div>
  </div>
</template>

<script>
  import E from 'wangeditor'
  var editor
  export default {
    name: 'editor',
    data () {
      return {
        editorContent: ''
      }
    },
    props: {
      articleContent: {
        type: String,
        default: ''
      }
    },
    methods: {
      getHtml () {
        return editor.txt.html()
      },
      clearHtml () {
        editor.txt.clear()
      },
      setHtml (html) {
        editor.txt.html(html)
      },
      setContenteditable (tag) {
        editor.$textElem.attr('contenteditable', tag)
      }
    },
    mounted() {
      editor = new E(this.$refs.div)
      // editor.customConfig.onchange = (html) => {
      //   this.editorContent = html
      // }
      editor.customConfig.uploadImgServer = '/api/blade-yuyihui/article/upload' //后台请求地址
      editor.customConfig.uploadImgHeaders = {
        'Blade-Auth': 'bearer ' + this.$store.getters.token //添加后台鉴权需要使用的token
      }
      editor.customConfig.uploadFileName = 'file' //文件名
      editor.customConfig.debug = true
      editor.customConfig.uploadImgHooks = {
        customInsert: function (insertImg, result, editor) {
          console.log(result)
          if (result.errno === 0) {
            var url =result.data;//获取后台返回的url
            insertImg(url); //插入图片，即回显
          } else {
            alert("插入图片失败")
          }
        }
      }
      editor.create()
    }
  }
</script>

<style scoped>
</style>

2、Vue调用编辑器组件并调用组件中的方法

<editor ref="editor"></editor>
this.$refs.editor.clearHtml('') //调用组件中的clear方法

3、springboot中的文件上传接口

    public String uploadImage(MultipartFile file, HttpServletRequest request) {
        try {
            String path = location; //windows为G:\\images\\，linux中为/usr/local/images/
            String fileName = file.getOriginalFilename();
            String suf = fileName.substring(fileName.indexOf("."), fileName.length());
            String uuid = UUID.randomUUID().toString();
            fileName = uuid + suf;
            //存储路径可在配置文件中指定
            File pfile = new File(path);
            if (!pfile.exists()) {
                pfile.mkdirs();
            }
            File tfile = new File(pfile, fileName);
            file.transferTo(tfile);
            FileVo fileVo = new FileVo();
            fileVo.setErrno(0);
            String[] returnPath = {url + "/images/" + fileName};//url在windows中为http://localhost:8889，linux中为http://47.105.107.186:8889
            fileVo.setData(returnPath);
            return JSON.toJSONString(fileVo);
        } catch (Exception e) {
            FileVo fileVo = new FileVo();
            fileVo.setErrno(1);
            String[] s = {e + ""};
            fileVo.setData(s);
            return JSON.toJSONString(fileVo);
        }
    }

4、配置地址映射，可以使用类似http://localhost:8889/images/xxx.jpg的格式访问本机上的图片

@Configuration
public class BladeConfiguration implements WebMvcConfigurer {
    @Value("${file.location}")
    private String location;
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/images/**")
            .addResourceLocations("file:///"+location ); //location同上
    }
}