vue使用富文本编辑器:vue-quill-editor粘贴图片+图片上传服务器

引入vue-quill-editor

1. 初始化vue-quill-editor

npm install vue-quill-editor --save

2. 部分页面引入组件

  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import {quillEditor} from 'vue-quill-editor'

全局引入组件

• main.js文件中

import  VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

根据需求自定义富文本

• 创建QuillEditorForm.vue和toolbarOptions.js，抽象成一个新的组件
• 需求：图片通过右键粘贴、点击上方图片上传按钮进行上传。由于组件默认将图片转为base64再放入内容中，如果图片比较大的话，富文本的内容就会很大，即使图片不大，只要图片较为多，篇幅较长，富文本的内容也变大影响数据传递。所以只能传递到服务器上，然后将url赋值给img的src。监听粘贴事件自定义上传（这个解决方案想了很久）
• show me the code

<template>
  <!--富文本编辑器-->
  <div class="app-container">
    <div class="avatar">
      <!-- 图片上传组件辅助-->
      <el-upload
        id="quill-upload"
        action="上传的路径"
        ref="annexUpload"
        name="content"
        :limit="1"
        list-type="picture"
        :on-exceed="handleExceed"
        :on-error="handleError"
        :on-success="uploadAttachment"
        :file-list="uploadList"
        :with-credentials="true"
        :auto-upload="true">
      </el-upload>
    </div>
    <el-row v-loading="quillUpdateImg">
      <div class="edit_container">
        <quill-editor
          :disabled="disableFlag"
          v-model="detailContent"
          ref="myQuillEditor"
          :options="editorOption"
          @change="onEditorChange($event)">
        </quill-editor>
      </div>
    </el-row>
  </div>

</template>
<script>
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import {quillEditor} from 'vue-quill-editor'
  import toolbarOptions from './toolbarOptions'

  export default {
    name: 'QuillEditorForm',
    components: {
      quillEditor
    },
    props: ['entity', 'disableFlag', 'problemDescribe'],
    data() {
      return {
        quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
        uploadList: [],
        detailContent: '', // 富文本内容
        // 富文本编辑器配置
        editorOption: {
          placeholder: '',
          theme: 'snow',  // or 'bubble'
          modules: {
            toolbar: {
              container: toolbarOptions,  // 工具栏
              handlers: {
                'image': function(value) {
                  if (value) {
                  // 绑定上传图片按钮
                    document.querySelector('#quill-upload input').click()
                  } else {
                    this.quill.format('image', false)
                  }
                }
              }
            }
          }
        }
      }
    },
    mounted() {
      //  自定义粘贴图片功能
      let quill = this.$refs.myQuillEditor.quill
      if (!this.disableFlag) {
        toolbarOptions[0] = ['image']
      }
      this.$forceUpdate()
      quill.root.addEventListener('paste', evt => {
        if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) {
          evt.preventDefault();
          [].forEach.call(evt.clipboardData.files, file => {
            if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
              return
            }
            this.uploadToServer(file, (res) => {
              // 获取光标内容
              var range = quill.getSelection()
              if (range) {
                this.uploadAttachment(res, file, null)
                //  将光标移动到图片后面
                this.$refs.myQuillEditor.quill.setSelection(range.index + 1)
              }
            })
          })
        }
      }, false)
    },
    methods: {
      uploadToServer(file, callback) {
        var xhr = new XMLHttpRequest()
        var formData = new FormData()
        formData.append('content', file)
        xhr.open('post', '服务器路径')
        xhr.withCredentials = true
        xhr.responseType = 'json'
        xhr.send(formData)
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4 && xhr.status === 200) {
            callback(xhr.response)
          }
        }
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制一次性上传最多 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      handleError(err, file, fileList) {
        this.$message.warning(`文件上传失败，请尝试重新上传，文件失败原因为： ${err}`)
      },
      uploadAttachment(response, file, fileList) {
        // 保存文件信息
        if (response.status.code === 0) {
          // 获取富文本组件实例
          let quill = this.$refs.myQuillEditor.quill
          // 获取光标所在位置
          let length = quill.getSelection().index
          // 插入图片  res.info为服务器返回的图片地址
          quill.insertEmbed(length, 'image', response.url)
          quill.setSelection(length + 1)
          let fileType = null
          if (file.raw && file.raw.type) {
            fileType = file.raw.type
          } else {
            fileType = file.type
          }
          let params = {}
          params = {
           // 保存文件上传的参数
          }
          workService.create(params).then((res) => {
            this.$message.success('上传成功')
          }).catch((err) => {
            this.$message.error(err)
          })
        } else {
          this.$message.error(response.status.message)
        }
        // 清空文件列表
        this.uploadList = []
      },
      onEditorChange(e) {
        this.$emit('change', e.html)
      }
    }
  }
</script>

<style scoped>

  .quill-editor {
    min-width: 600px;
    max-width: 700px;
    max-height: 250px;
    overflow: auto;
  }

  .avatar {
    display: none;
  }

  /deep/ .ql-disabled {
    background-color: #F5F7FA;
    border-color: #E4E7ED;
    color: #C0C4CC;
    cursor: not-allowed;
  }

  /*.edit_container {*/
  /*  position: relative;*/
  /*}*/
</style>

toolbarOptions.js

const toolbarOptions = [
  // ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  [{'header': 1}, {'header': 2}],
  // [{'list': 'ordered'}, {'list': 'bullet'}],
  [{'script': 'sub'}, {'script': 'super'}],
  [{'indent': '-1'}, {'indent': '+1'}],
  [{'direction': 'rtl'}],
  [{'size': ['small', false, 'large', 'huge']}],
  [{'header': [1, 2, 3, 4, 5, 6, false]}],
  // [{'color': []}, {'background': []}],
  // [{'font': []}],
  // [{'align': []}],
  // ['link', 'image', 'video'],
  ['clean']
]
export default toolbarOptions

• 头部工具栏请参考官网
• 只粘贴文本

// 只能粘贴原文本
      handleCustomMatcher(node, Delta) {
        let ops = []
        Delta.ops.forEach(op => {
          if (op.insert && typeof op.insert === 'string') {
            // 如果粘贴了图片，这里会是一个对象，所以可以这样处理
            ops.push({
              insert: op.insert
            })
          }
        })
        Delta.ops = ops
        return Delta
      },

拓展

• 调节图片大小
• 打包报错的话请参考

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

// 引入
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)

// build/webpack.base.conf.js文件
const webpack = require('webpack')
plugins: [
   new webpack.ProvidePlugin({
       'window.Quill': 'quill/dist/quill.js',
       'Quill': 'quill/dist/quill.js'
 })
]

// 放在editorOption里面
 history: {
              delay: 1000,
              maxStack: 50,
              userOnly: false
            },
            imageDrop: true,
            imageResize: {
              displayStyles: {
                backgroundColor: 'black',
                border: 'none',
                color: 'white'
              },
              modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
            }

兼容性问题

兼容IE10以上

本文地址：https://blog.csdn.net/xuxuan1997/article/details/109235929