1.安装

npm install vue-quill-editor --save    //富文本控件
npm install quill-image-resize-module -S //控制图片大小位置
npm install quill -S        //image-resize在此注册

2.实例页面代码

export function upload(data) {
  return request({
    url: '/open/test/file',
    method: 'post',
    data: data
  })
}

PostMapping("file")
    @ApiOperation(value="文件上传")
    public ResultJson uploadOssFile(MultipartFile file) {
    。。。。。。。。。。。。。。。
        return ResultJson.ok().data("url","");
    }

<template>
  <div>
    <button @click="getContent">提交</button>
    <!-- v-model="content" -->
    <quill-editor
      ref="myQuillEditor"
      :options="editorOption"
      class="editor"
    ></quill-editor>
  </div>
</template>

<script>
import { upload, addOne, getOne, update } from "@/api/blog/article";
import "quill/dist/quill.snow.css";
import Quill from "quill";
import { quillEditor } from "vue-quill-editor";
import ImageResize from "quill-image-resize-module"; // 引用
Quill.register("modules/imageResize", ImageResize); // 注册
// 工具栏配置
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}]
  [{ size: ["small", false, "large", "huge"] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ header: [1, 2, 3, 4, 5, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ["clean"], // 清除文本格式-----['clean']
  ["link", "image", "video"] // 链接、图片、视频-----['link', 'image', 'video']
];
const handlers = {
  //重写图片上传
  image: function image() {
    let self = this;
    let fileInput = this.container.querySelector("input.ql-image[type=file]");
    if (fileInput === null) {
      fileInput = document.createElement("input");
      fileInput.setAttribute("type", "file");
      // 设置图片参数名
      fileInput.setAttribute("name", "file");
      // 可设置上传图片的格式
      fileInput.setAttribute(
        "accept",
        "image/png, image/gif, image/jpeg, image/bmp, image/x-icon"
      );
      fileInput.classList.add("ql-image");
      // 监听选择文件
      fileInput.addEventListener("change", function() {
        let params = new FormData();
        params.append("file", fileInput.files[0]);
        upload(params).then(res => {
          let length = self.quill.getSelection(true).index;
          //写入图片
          self.quill.insertEmbed(length, "image", res.data.url);
          self.quill.setSelection(length + 1);
          fileInput.value = "";
        });
      });
      this.container.appendChild(fileInput);
    }
    fileInput.click();
  }
};
export default {
  data() {
    return {
      content:
        "<h1><sup>胡椒粉和快速导航尽快发货就是地方就是点击返回肯定是的时间发货接口</sup></h1><h1><sup>点击返回空间数据库和技术大会客户是否</sup></h1><h1><sup>是靠进口粮食就开始大家付款就上课</sup></h1><p><img src='' width='397'  style='display: inline; float: right; margin: 0px 0px 1em 1em; cursor: nwse-resize;'></p>",
      editorOption: {
        theme: "snow",
        placeholder: "请输入正文",
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: handlers
          },
          imageResize: {
            displaySize: true
          }
        }
      }
    };
  },
  mounted() {
    //回显内容过程会因为内置绑定策略过滤style,导致img添加的样式无法展示
    document.querySelector(".ql-editor").innerHTML = this.content;
  },
  created() {},
  components: {
    quillEditor
  },

  computed: {},

  methods: {
    getContent() {
      console.log(document.querySelector(".ql-editor").innerHTML);
    }
  }
};
</script>
<style lang="less" scoped></style>

使用过程中发现通过插件调整的图片位置css是放在img的内联style中的，但是用v-model="content"回显内容后style则消失了,导致img添加的样式无法展示，解决方法如下：

    document.querySelector(".ql-editor").innerHTML = this.content;

3.展示效果