【Vue】运行npm run dev出现98%vue-quill-editor 富文本编辑器错误解决

感谢：SpiritualTuto，来自：VUE vue-quill-editor 富文本编辑器的使用_npm install --save quill/dist/quill.bubble.css qui-CSDN博客

1、下载Vue-Quill-Editor

npm install vue-quill-editor --save

2、如果还不行，下载quill（Vue-Quill-Editor需要依赖）

npm install quill --save

3、全局引入

??? ?import 'quill/dist/quill.core.css'
??? ?import 'quill/dist/quill.snow.css'
??? ?import 'quill/dist/quill.bubble.css'
??? ?import { quillEditor } from 'vue-quill-editor
??? ?//单独页面注册一下
??? ?exp def{
??? ??? ?components: {quillEditor},
??? ?}

  <quill-editor
      ref="newEditor"
      v-model="content"
      class="qediter"
      :style="`height: ${height}px`"
      :options="editorOption"
      @change="onEditorBlur($event)"
    />

4、** 选项配置（如果为空的就默认展示所有选项）
?

   editorOption: {
        placeholder: '请在这里输入',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], //引用，代码块
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: 'ordered' }, { list: 'bullet' }], //列表
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ align: [] }], //对齐方式
            ['clean'], //清除字体样式
            ['image', 'video'] //上传图片、上传视频
          ]
        }
      },

此时此刻 你就可以实现最基础的富文本编辑器啦~

但是富文本编辑器上传图片的格式为 base64位的 , 后端无法处理

于是我们要调取后端的接口获取地址, 并且要把图片反显到编辑器上

body部分

<template>
  <div class="container">
    <quill-editor
      ref="newEditor"
      v-model="content"
      class="qediter"
      :style="`height: ${height}px`"
      :options="editorOption"
      @change="onEditorBlur($event)"
    />
    <!-- 隐藏upload 上传图片 -->
    <el-upload
      ref="uploadImg"
      class="upload-img"
      //这里写入你的接口地址
      action="#########"
      :before-upload="picBeforeupload"
      :on-error="picError"
      :on-success="success"
      accept="image/png, image/jpeg, image/jpg, image/gif"
      :show-file-list="false"
    >
      <slot name="trigger">
        <div id="editorUploadImage" />
      </slot>
    </el-upload>
  </div>
</template>

JS部分

 props: {
    value: {
      type: String,
      default: ''
    },
    option: {
      type: Object,
      default: () => ({})
    },
    height: {
      type: Number,
      default: 500
    }
  },
  data() {
    return {
      content: '',
      editorOption: {
        placeholder: '请在这里输入',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], //引用，代码块
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: 'ordered' }, { list: 'bullet' }], //列表
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ align: [] }], //对齐方式
            ['clean'], //清除字体样式
            ['image', 'video'] //上传图片、上传视频
          ]
        }
      },
      addImgRange: null
    }
  },
  watch: {
    value: {
      handler(newValue, preValue) {
        if (newValue !== preValue && newValue !== this.content) {
          this.content = newValue
        }
      },
      immediate: true
    }
  },
  created() {
    Object.assign(this.editorOption, this.option)
  },
  mounted() {
    this.init()
      },
  methods: {
    //成功回调
    success(res){
      const url = Api.imgUrl +res.data
       this.addImg(url)
    },
    init() {
      // 重写图片添加图片
      const imgHandler = state => {
        if (state) {
          document.getElementById('editorUploadImage').click()
        }
      }
      this.$refs.newEditor.quill.getModule('toolbar').addHandler('image', imgHandler)
    },

    onEditorBlur() {
      this.$emit('input', this.content)
    },
    // 图片大小检查
    picBeforeupload(file) {
      const isLt4M = file.size / 1024 / 1024 < 4
      if (!isLt4M) {
        this.$message.error('上传图片大小不能超过 4MB!')
      }
      return isLt4M
    },
    // 上传图片失败
    picError() {
      this.$message({
        message: '图片添加失败，请重试',
        type: 'error'
      })
    },
    // 添加图片
    addImg(imgUrl) {
      this.addImgRange = this.$refs.newEditor.quill.getSelection() // 检索用户的选择范围, 如果编辑没有焦点，可能会返回一个null
      this.$refs.newEditor.quill.insertEmbed(
      this.addImgRange != null ? this.addImgRange.index : 0,
      'image',
       imgUrl,
      )
    }
  }