Vue项目使用quill富文本编辑器实现图片视频上传到服务端

富文本编辑器自带插入图片是以base64的方式插入,然后将富文本内容传给后端保存,视频是直接引入外部url插入到富文本当中,如果外链视频下架,富文本内视频就无法播放,需求是实现图片和视频都上传至服务端再以链接的形式插入到富文本当中,话不多说直接上代码

quill 中文文档(别人翻译的)

首先安装quill组件

npm install vue-quill-editor --save

然后是html部分 

css

字体的话需要自己自行修改设置

js部分

图片调整大小需要下载依赖 ImageResize

npm install quill-image-resize-module --save

import { filesadd } from "../../api/files";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import Quill from 'quill';  
import VideoBlot from './video.js';
Quill.register(VideoBlot);
import ImageResize from 'quill-image-resize-module'; // 引用
Quill.register('modules/imageResize', ImageResize); // 注册

export default {
  name: "",
  components: {
    quillEditor,
  },
  props:{value:""},
  data() {
    return {
      result:this.value,
      editorOption: {
        placeholder: "输入文本...",
        modules: {
          imageResize:{          //放大缩小
            displaySize: true
          },
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
              ["blockquote", "code-block"], //引用，代码块
              [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
              [{ list: "ordered" }, { list: "bullet" }], //列表
              [{ script: "sub" }, { script: "super" }], // 上下标
              [{ indent: "-1" }, { indent: "+1" }], // 缩进
              [{ direction: "rtl" }], // 文本方向
              [
                {
                  'size': ['small', false, 'large', 'huge'] 
                },
              ], // 字体大小，false设置自定义大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
              [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
              [{ align: [] }], //对齐方式
              ["clean"], //清除字体样式
              ["image", "video"], //上传图片、上传视频
            ],
            handlers: {
              video: function (val) {
                // 劫持原来的视频点击按钮事件
                document.querySelector("#uploadFileVideo").click();
              },
              image:function (val) {
                document.querySelector("#uploadFileImage").click();
              }
            },
          },
        },
      },
    };
  },
  methods: {
    onEditorChange(event) {
        
      },

      //上传视频到服务器
    async changeimage(file) {
      var formData = new FormData();
      formData.append("file", file.target.files[0]);
      const res = await filesadd(formData);
      console.log(res);
      if (res.errCode == 200) {
      //回调中调用  this.insertEle('image', data); 方法，插入图片到富文本
        this.insertImg("image", res.url);
      }
    },
      //上传图片到服务器
    async changevideo(file) {
      var formData = new FormData();
      formData.append("file", file.target.files[0]);
      const res = await filesadd(formData);
      console.log(res);
      if (res.errCode == 200) {
      //回调中调用  this.insertEle('video', data); 方法，插入视频到富文本
        this.insertEle("video", res.url);
      }
    },
    // 图片上传事件
    insertImg(type, url) {
      let quill = this.$refs.myQuillEditor.quill;
      let length = quill.getSelection().index;
      // 插入视频  url为服务器返回的图片地址
      if (type === "image") {
      quill.insertEmbed(length, "image", url);
      } else {
        quill.insertEmbed(length, type, fileurl);
      }
      // 调整光标到最后
      quill.setSelection(length + 1);
    },
    //视频上传事件
    insertEle(type, url) {
      let quill = this.$refs.myQuillEditor.quill;
      let length = quill.getSelection().index;
      // 插入视频  url为服务器返回的图片地址
      if (type === "video") {
      quill.insertEmbed(length, "simpleVideo", {url,width:'100%',height:'auto',controls:'controls'});
      } else {
        quill.insertEmbed(length, type, fileurl);
      }
      // 调整光标到最后
      quill.setSelection(length + 1);
    },
  },
};

视频需要再同级目录下创建配置文件video.js

import Quill from 'quill';  
const BlockEmbed = Quill.import('blots/block/embed');
class VideoBlot extends BlockEmbed {
  static create (value) {
    let node = super.create();
    node.setAttribute('src', value.url);
    node.setAttribute('controls', value.controls);
    node.setAttribute('width', value.width);
    node.setAttribute('height', value.height);
    node.setAttribute('webkit-playsinline', true);
    node.setAttribute('playsinline', true);
    node.setAttribute('x5-playsinline', true);
    return node;
  }
  static value (node) {
    return {
      url: node.getAttribute('src'),
      controls: node.getAttribute('controls'),
      width: node.getAttribute('width'),
      height: node.getAttribute('height')
    };
  }
}
VideoBlot.blotName = 'simpleVideo';
VideoBlot.tagName = 'video';
export default VideoBlot;

注意:使用image-resize组件的时候需要先配置webpack,不然浏览器控制台会报错

Cannot read property 'imports' of undefined"、
Failed to mount component: template or render function not defined.、
Cannot read property 'register' of undefined。

具体配置如下

1. 在build文件夹下找到webpack.base.conf.js。

   module.exports = {
      plugins: [
              new webpack.ProvidePlugin({
          		// 在这儿添加下面两行
                  'window.Quill': 'quill/dist/quill.js',
                  'Quill': 'quill/dist/quill.js'
          })
      ]
   }
   

2. 基于vue-cli创建，找不到webpack.base.conf.js；在vue.config.js中设置

   const webpack = require('webpack');
   module.exports = {
      chainWebpack: config => {
          config.plugin('provide').use(webpack.ProvidePlugin, [{
              'window.Quill': 'quill/dist/quill.js',
             'Quill': 'quill/dist/quill.js'
       }]);
      },
   }