wangEditor编辑器链接:(使用更简单些~~)
https://blog.csdn.net/ziyu_nuannuan/article/details/122837550

1.安装

npm install quill ^2.0.0-dev.3 版本需要大于2.0版本 npm install
quill-better-table 处理表格

2.创建组件页面 quill-editor.vue

<template>
  <div>
    <el-upload
      ref="upload"
      class="avatar-uploader"
      :action="serverUrl"
      name="file"
      :headers="headers"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :on-error="uploadError">
    </el-upload>
    <div class="editor"  style="height: calc(100% - 100px)"></div>
  </div>
</template>
<script>
  import Quill from 'quill'
  import 'quill/dist/quill.snow.css'

  import QuillBetterTable from 'quill-better-table'
  import 'quill-better-table/dist/quill-better-table.css'

  Quill.register({
    'modules/better-table': QuillBetterTable
  }, true)

  export default {
    name: 'editor',
    props: ['value'],
    data() {
      return {
        quill: null,
        content:'',
        options: {
          theme: 'snow',
          modules: {
            toolbar: {
              container: [
                ['bold', 'italic', 'underline', 'strike'],
                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                [{ 'script': 'super' }],
                [{ 'indent': '-1' }, { 'indent': '+1' }],
                [{ 'size': ['small', false, 'large', 'huge'] }],
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                [{ 'color': [] }, { 'background': [] }],
                [{ 'align': [] }],
                ['link', 'image'],
                [
                  { 'table': 'TD' },
                ],
              ],
              handlers: {
                'table': function () {//默认插入的表格行列数
                  this.quill.getModule('better-table').insertTable(3, 3)
                },
              },
            },
            table: false,
            'better-table': {//表格设置
              operationMenu: {
                items: {//鼠标右键菜单设置,如将某一项设置false则右键菜单不会显示 如insertColumnRight: false
                  insertColumnRight: {
                      text: '右边插入一列'
                    },
                    insertColumnLeft: {
                      text: '左边插入一列'
                    },
                    insertRowUp: {
                      text: '上边插入一行'
                    },
                    insertRowDown: {
                      text: '下边插入一行'
                    },
                    mergeCells: {
                      text: '合并单元格'
                    },
                    unmergeCells: {
                      text: '拆分单元格'
                    },
                    deleteColumn: {
                      text: '删除列'
                    },
                    deleteRow: {
                      text: '删除行'
                    },
                    deleteTable: {
                      text: '删除表格'
                    },
                },
                background: {
                  color: '#333'
                },
                color: {
                  colors: ['green', 'red', 'yellow', 'blue', 'white'],
                  text: '背景颜色:'
                }
              }
            },
            keyboard: {
              bindings: QuillBetterTable.keyboardBindings
            }
          },
          placeholder: '请输入内容 ...'
        },
        // 图片上传请求头
        headers: {
          token: localStorage.getItem('token')
        },
        // 图片上传调用的后端地址url 
        serverUrl:'/api/upload',
      }
    },
    mounted() {
      let dom = this.$el.querySelector('.editor')
      this.quill = new Quill(dom, this.options);
      this.quill.setContents(this.value)
      this.quill.on('text-change', () => {
        this.$emit('inputChange', this.quill.getContents())
      });
    },
    methods:{
      uploadSuccess(res, file) {
        let quill = this.$refs.myQuillEditor.quill
        // 上传成功
        if (res.code === 0) {
          // 获取光标所在位置
          let length = quill.getSelection.index;
          // 插入图片
          quill.insertEmbed(length, 'image', res.data);
          // 调整光标到最后
          quill.setSelection(length + 1);
        } else {
          this.$message.error("插入图片失败");
        }
      },
      uploadError() {
        this.$message.error("图片上传失败");
      },
    },
  }
</script>
<style scoped>
  /deep/ .ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button {
    background: ivory;
  }
 //图标背景颜色
  /deep/ .ql-toolbar.ql-snow .ql-picker-label {
    border: 1px solid transparent;
    background: ivory;
  }
  //富文本框大小
  /deep/ .ql-editor{
    height: 500px;
    padding: 0 10px;
  }
 //图标间距设置
  /deep/ .ql-toolbar.ql-snow .ql-formats {
    margin-right: 15px;
    margin-bottom: 5px;
  }

 //表格边框颜色设置
  /deep/ table.quill-better-table td{
    border: 1px solid #fff;
  }
  //table宽度铺满
  /deep/ table.quill-better-table{
  width: 100% !important;
}

</style>

3.父组件引用

<Editor :ref="'myQuillEditor'+id"
                v-model="details"
                @inputChange="onEditorChange($event)">
</Editor>
                
<script>
import Editor from '@/components/quill-editor'
export default {
    name: "index",
    components: {
      Editor
    },
    data() {
      return {
        details:'',
        id:''
      };
    },
    created() {
      this.getInfo()
    },
    methods:{
      //将已有的数据回显到富文本框中
      getInfo(){
       //假设调用接口返回值为res.data
       //解析成json格式
        this.details = JSON.parse(res.data.details)
        //如果页面中调用多个富文本框,则ref动态
        let r = 'myQuillEditor'+id
         if (this.$refs[r]) {
           this.$refs[r].quill.setContents(this.details)
         }
        //如是单个页面调用方式如下
        //this.$refs.myQuillEditor.quill.setContents(this.details)
      },
      onEditorChange(val){
       //富文本框返回的数据格式为
       //{"ops":[{"insert":"SSSSSSSSSSSSSSSSSSSSSSSSS\n"}]}
        this.details = val
      },
      //保存需要处理数据
      save(){
      			//处理成string格式存储到数据库
      			let details = JSON.stringify(this.details)
      			...
      }
      
    }


  };
</script>

4.后端接口

@Slf4j
@RestController
public class FileUploadController {

		/**
		* yml中配置的存储路径
		*/
    @Value("${file.uploadFolder}")
    private String rootPath;

 /**
     * 文件上传
     * @param file
     * @param request
     * @return
     */
    @RequestMapping("/upload")
    @ResponseBody
    public JsonResult uploadFile(@RequestParam(value = "file", required = false)MultipartFile file, HttpServletRequest request) {
        String path = rootPath;
        String fileName = file.getOriginalFilename();
        // 获取文件名后缀
        String suffix = fileName.substring(file.getOriginalFilename().lastIndexOf("."));
        suffix = suffix.toLowerCase();
        fileName = UUID.randomUUID().toString() + suffix;
        File targetFile = new File(path, fileName);
        // 判断父级目录是否存在
        if (!targetFile.getParentFile().exists()) {
            targetFile.getParentFile().mkdirs();
        }
        // 保存本地
        try {
            file.transferTo(targetFile);
        } catch (IOException e) {
            e.printStackTrace();
            return JsonResult.error("上传失败！");
        }
        // 项目url
        String fileUrl = request.getContextPath() + "/api/showImg?imgUrl=";
        // 文件获取路径
        fileUrl += "/"+ fileName;
        return JsonResult.success(fileUrl);
    }

 /**
     * 文件回显
     * @param imgUrl
     * @param response
     * @throws IOException
     */
    @GetMapping("/showImg")
    public void ioReadImage(String imgUrl, HttpServletResponse response) throws IOException {
        ServletOutputStream out = null;
        FileInputStream ips = null;
        try {
            //获取图片存放路径
            String imgPath = rootPath + imgUrl;
            ips = new FileInputStream(new File(imgPath));
            String type = imgUrl.substring(imgUrl.indexOf(".") + 1);
            if ("png".equals(type)) {
                response.setContentType("image/png");
            }
            if ("jpeg".equals(type)) {
                response.setContentType("image/jpeg");
            }

            out = response.getOutputStream();
            //读取文件流
            int len = 0;
            byte[] buffer = new byte[1024 * 10];
            while ((len = ips.read(buffer)) != -1) {
                out.write(buffer, 0, len);
            }
            out.flush();
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            out.close();
            ips.close();
        }
    }
   }