vue使用富文本编辑器+自由伸缩图片

首先要下载依赖，下方是本人使用的package.json，下载完依赖如果有启动项目失败的情况，建议将依赖版本降低或使用和下方一样的版本
在这里插入图片描述
package.json代码

{
  "name": "l",
  "version": "0.1.0",
  "private": true,
  "description": "## Project setup ```npm install ```",
  "author": "lhs",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "main": ".eslintrc.js",
  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.31.1",
    "echarts": "^4.8.0",
    "element-ui": "^2.15.2",
    "html2canvas": "^1.4.0",
    "jquery": "^3.5.1",
    "jspdf": "^2.5.0",
    "postcss-px2rem": "^0.3.0",
    "px2rem-loader": "^0.1.9",
    "quill": "^1.3.7",
    "quill-image-drop-module": "^1.0.3",
    "quill-image-resize-module": "^3.0.0",
    "script-loader": "^0.7.2",
    "scss": "^0.2.4",
    "style-resources-loader": "^1.3.3",
    "vue": "^2.6.12",
    "vue-qr": "^3.2.4",
    "vue-quill-editor": "^3.0.6",
    "vue-router": "^3.0.7",
    "vuex": "^3.4.0",
    "vuex-persistedstate": "^2.7.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "sass": "^1.28.0",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.0.0"
  },
  "license": "ISC"
}

使用前还要进行引入和注册
main.js代码如下

import Quill from "quill";
import ImageResize from "quill-image-resize-module"; // 引用
import { ImageDrop } from "quill-image-drop-module";
Quill.register("modules/imageDrop", ImageDrop);
Quill.register("modules/imageResize", ImageResize); // 注册

vue.config.js代码

const webpack = require('webpack')
 

module.exports = {
 configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        Quill: 'quill/dist/quill.js'
      })
    ]
  }
 }

使用页面代码如下

 <quill-editor
                          class="editor"
                          v-model="formValidator.inputCenter"
                          ref="myQuillEditor"
                          :options="editorOption"
                          @blur="onEditorBlur($event)"
                          @focus="onEditorFocus($event)"
                          @change="onEditorChange($event)"
                          @ready="onEditorReady($event)"
                        >
                  </quill-editor>


    <el-upload
      class="upload-demo"
      ref="upload"
      v-show="false"
      action
      :file-list="fileList"
      :auto-upload="true"
      :http-request="handleUploadForm"
      :headers="headers"
      :show-file-list="false"
    >
      <span id="upload123" @submit="submitUpload">上传</span>
    </el-upload>


<script>
//这里的css放到文章结束了，可自行下载
import '@/assets/css/quill/quill.core.css'
import '@/assets/css/quill/quill.snow.css'
import '@/assets/css/quill/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor' //

export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      editorOption: {//富文本表头的配置项
        placeholder: '请输入',
        theme: 'snow',
        modules: {
          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: [
                    '12',
                    '14',
                    '16',
                    '18',
                    '20',
                    '22',
                    '24',
                    '28',
                    '32',
                    '36',
                  ],
                },
              ], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
              // [{ font: ['songti'] }], // 字体种类
              [{ align: [] }], // 对齐方式
              ['clean'], // 清除文本格式
              ['image'], // 链接、图片，需要视频的可以加上video
            ],
            handlers: {
              //此处是图片上传时候需要使用到的
              image: function (value) {
                console.log(value)
                if (value) {
                  // 点击图片，这里的#upload123要和上传组件的id一致
                  document.querySelector('#upload123').click()
                }
              },
            },
          },
          imageDrop: true, // 图片拖拽
          imageResize: {
            // 图片放大缩小
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white',
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar'],
          },
        },
      },
      titleConfig: [//这个是用来配置表头的鼠标悬浮文字提示的，可自行更改
        { Choice: '.ql-insertMetric', title: '跳转配置' },
        { Choice: '.ql-bold', title: '加粗' },
        { Choice: '.ql-italic', title: '斜体' },
        { Choice: '.ql-underline', title: '下划线' },
        { Choice: '.ql-header', title: '段落格式' },
        { Choice: '.ql-strike', title: '删除线' },
        { Choice: '.ql-blockquote', title: '块引用' },
        { Choice: '.ql-code', title: '插入代码' },
        { Choice: '.ql-code-block', title: '插入代码段' },
        { Choice: '.ql-font', title: '字体' },
        { Choice: '.ql-size', title: '字体大小' },
        { Choice: '.ql-list[value="ordered"]', title: '编号列表' },
        { Choice: '.ql-list[value="bullet"]', title: '项目列表' },
        { Choice: '.ql-direction', title: '文本方向' },
        { Choice: '.ql-header[value="1"]', title: 'h1' },
        { Choice: '.ql-header[value="2"]', title: 'h2' },
        { Choice: '.ql-align', title: '对齐方式' },
        { Choice: '.ql-color', title: '字体颜色' },
        { Choice: '.ql-background', title: '背景颜色' },
        { Choice: '.ql-image', title: '图像' },
        { Choice: '.ql-video', title: '视频' },
        { Choice: '.ql-link', title: '添加链接' },
        { Choice: '.ql-formula', title: '插入公式' },
        { Choice: '.ql-clean', title: '清除字体格式' },
        { Choice: '.ql-script[value="sub"]', title: '下标' },
        { Choice: '.ql-script[value="super"]', title: '上标' },
        { Choice: '.ql-indent[value="-1"]', title: '向左缩进' },
        { Choice: '.ql-indent[value="+1"]', title: '向右缩进' },
        { Choice: '.ql-header .ql-picker-label', title: '标题大小' },
        {
          Choice: '.ql-header .ql-picker-item[data-value="1"]',
          title: '标题一',
        },
        {
          Choice: '.ql-header .ql-picker-item[data-value="2"]',
          title: '标题二',
        },
        {
          Choice: '.ql-header .ql-picker-item[data-value="3"]',
          title: '标题三',
        },
        {
          Choice: '.ql-header .ql-picker-item[data-value="4"]',
          title: '标题四',
        },
        {
          Choice: '.ql-header .ql-picker-item[data-value="5"]',
          title: '标题五',
        },
        {
          Choice: '.ql-header .ql-picker-item[data-value="6"]',
          title: '标题六',
        },
        { Choice: '.ql-header .ql-picker-item:last-child', title: '标准' },
        {
          Choice: '.ql-size .ql-picker-item[data-value="small"]',
          title: '小号',
        },
        {
          Choice: '.ql-size .ql-picker-item[data-value="large"]',
          title: '大号',
        },
        {
          Choice: '.ql-size .ql-picker-item[data-value="huge"]',
          title: '超大号',
        },
        { Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' },
        { Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' },
        {
          Choice: '.ql-align .ql-picker-item[data-value="center"]',
          title: '居中对齐',
        },
        {
          Choice: '.ql-align .ql-picker-item[data-value="right"]',
          title: '居右对齐',
        },
        {
          Choice: '.ql-align .ql-picker-item[data-value="justify"]',
          title: '两端对齐',
        },
      ],
    }
  },

  created() {},
  mounted() {
 
  },
  destroyed() {},
  computed: {
  },
  methods: {
    async onUploadHandler(e) {
      const imageUrl = 上传七牛云后返回来的一串在线链接

      // 获取光标所在位置
      let quill = this.$refs.myQuillEditor.quill
      let length = quill.getSelection().index
      // 插入图片
      quill.insertEmbed(length, 'image', imageUrl)
      // 调整光标到最后
      quill.setSelection(length + 1)
      // this.content += url
    },
    // 失去焦点事件
    onEditorBlur(quill) {
      console.log('editor blur!', quill)
    },
    // 获得焦点事件
    onEditorFocus(quill) {
      console.log('editor focus!', quill)
    },
    // 准备富文本编辑器
    onEditorReady(quill) {
      console.log('editor ready!', quill)
    },
    // 内容改变事件，只需要这一个方法就够了
    onEditorChange({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.formValidator.inputCenter = html
    },
    // 预览
    handlePreview(val) {
      this.imageDialog.src = this.$Api.Image.GetOriginalImgUrl + val
      this.imageDialog.visible = true
    },
    submitUpload(e) {
      this.$refs.upload.submit()
    },
    async handleUploadForm(param) {
      //文件上传
      var _this = this
      let formData = new FormData()
      formData.append('file', param.file)
      var imgtype = param.file.type.toLowerCase().split('/')
      if (
        imgtype[1] != 'png' &&
        imgtype[1] != 'jpeg' &&
        imgtype[1] != 'bmp' &&
        imgtype[1] != 'jpg'
      ) {
        return this.$notify({
          title: '警告',
          message: '图片格式不正确！',
          type: 'warning',
        })
      }
      const res = await this.$Api.Image.UploadImg(formData)
      if (res.ok) {
        this.scussFile.id = res.data[0]
        this.scussFile.size = param.file.size
        this.photoId1 = res.data[0]

        const imageUrl = this.$Api.Image.GetThumbnailImgUrl + this.photoId1

        // 获取光标所在位置
        let quill = this.$refs.myQuillEditor.quill
        let length = quill.getSelection().index
        // 插入图片
        quill.insertEmbed(length, 'image', imageUrl)
        // 调整光标到最后
        quill.setSelection(length + 1)

        this.photoId1Img = this.$Api.Image.GetThumbnailImgUrl + this.photoId1
      } else {
        this.$message('上传文件失败，' + data.message)
      }
    }
  },
}
</script>

备注：这个富文本框接受从其他地方复制进来内容，复制word文档里面的格式可能会有标识丢失的问题，图片要单独复制进来，和文字一起选中复制进入富文本框可能会导致图片上传失败

参考文档：
vue-quill-editor富文本编辑器使用步骤
Quill官方中文文档
quill.js源码