记录贴：vue-quill-editor的使用及图片拦截，文本域内图片自由调整大小

组件中使用步骤

1. npm i quill vue-quill-editor
2. import { quillEditor} from "vue-quill-editor";
3. import "quill/dist/quill.snow.css"; //quill编辑器的样式表
4. 在vue中注册quillEditor组件components: { quillEditor },
5. 在template中使用这个组件

 <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      style="height: 300px"
    >
    </quill-editor>

6. 在data中写入配置项

data(){
    return {
       content:'', //文本区域内容
       editorOption: { 
        placeholder: "请输入内容...",
        modules: {
             
          }
        },
      },
    }
}

7. 拿到quill值

 computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },

这时页面就出现了富文本编辑器

当我们调用接口保存时，直接存图片，文件会很大，此时要在传图片前拦截图片上传，借助antdesign的上传功能只存一个地址
首先要拦截图片上传

1. 先配置编辑器的一些功能

var toolbarList=[          ["bold", "italic", "underline", "strike"], // toggled buttons
          ["blockquote", "code-block"],
          [{ header: 1 }, { header: 2 }], // custom button values
          [{ list: "ordered" }, { list: "bullet" }],
          [{ script: "sub" }, { script: "super" }], // superscript/subscript        
          [{ direction: "rtl" }], // text direction
          [{ size: ["small", false, "large", "huge"] }],
          [{ header: [1, 2, 3, 4, 5, 6, false] }],
          [{ color: [] }, { background: [] }], 
          [{ font: [] }],
          [{ align: [] }],
          ["clean"], 
          ["link"], 
          ["image"], 
        ]                         

2. data中引用

data(){
   return {
      content:'', //文本区域内容
      editorOption: { 
       placeholder: "请输入内容...",
       modules: {
             toolbar: toolbarList,
         }
       },
     },
   }
}

3.在mounted中定义此方法，当点击富文本中的上传图片按钮通过JS点击事件触发antdesign的上传功能
 ```</a-button>
      <a-upload
     name="file"
    :multiple="true"
     @change="handleChange"
     :showUploadList='false'
    action="上传图片到地址"
  >
    <a ref="uploader"></a>
  </a-upload>
 
 mounted() {
     var toolbar = this.editor.getModule('toolbar');
     toolbar.addHandler('image', () => {
          this.$refs.uploader.click()
     });
  },
  methods：{
          handleChange(info){
       if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {//上传成功在文本区域显示图片
        //info.file.response中可拿到转码后地址
          this.content += `<img src='${this.$absoultSrc(info.file.response)}'/>`
          //this.$absoultSrc()是自己封装的拼接图片路径的方法
      } else if (info.file.status === 'error') {
          this.$message.error(`上传失败`);
      }
     }
  }

此时就借助了antdesign拦截了原本的图片上传，点击编辑器的上传图片按钮实际出发antdesign的上传功能，使上传的图片文件没那么大

文本域拖拽图片功能步骤

1. npm i @felrov/quill-image-resize-module
2. import { quillEditor ,Quill } from "vue-quill-editor";
3. Quill.register("modules/imageResize", ImageResize)
4. import ImageResize from '@felrov/quill-image-resize-module';
5. 添加imageResize配置对象

      editorOption: {
        placeholder: "请输入内容...",
        modules: {
          toolbar: toolbarList,
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
          }
        },
      },

6. 此时上传图片时就可在文本域内拖拽调整图片大小

7. 如果有想在其他组件看到此页面内编辑样式，需在main.js或对应展示的组件内引入 import "quill/dist/quill.core.css";的css文件