Vue富文本编辑器vue-quill-editor

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;width: 600px"
    >
    </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-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(`上传失败`);
     }
    }
 } 

4. 此时就借助了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' ]
      }
    },
  },

此时上传图片时就可在文本域内拖拽调整图片大小
如果有想在其他组件看到此页面内编辑样式，需在main.js或对应展示的组件内引入

import "quill/dist/quill.core.css";的css文件