vue-quill-editor 使用-图片上传

vue 项目开发中，文本编辑器的选择很多，一些熟悉的文本编辑器都可以使用，如UEditor、wangEditor，这里介绍基于 vue 的一个文本编辑器插件 vue-quill-editor

此插件基于 quill，所以使用 cdn 节点方式引用时，还需要引用 quill.js

使用 npm 安装时，只需要安装 vue-quill-editor即可，因为会自动下载依赖

npm install vue-quill-editor --save

1、简单使用

可以全局或者在组件内部使用

我们这里全局使用

main.js 中代码

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

组件中使用如下代码，引入编辑器

<quill-editor v-model="goodsForm.introduce" ref="myQuillEditor" ></quill-editor>

现在，插件就可以使用了

问题：图片是以 base64 编码格式存储的，而不是图片的服务器路径

2、上传图片

vue-quill-editor 有一个图片上传的模块，但是因为已经不更新了，所以不建议使用

解决方法：自定义图片上传组件，具体来说

• 使用 el-upload 作为上传组件
• 默认情况下，此组件隐藏
• 点击 vue-quill-editor 中的图片按钮时，触发 el-upload 组件的单击事件，打开文件选择框
• 上传成功后，获取图片地址，插入到光标处

加入el-upload

在 vue-quill-editor 下方加入如下代码

<el-upload
              drag
              multiple
              :headers="reqtHeader"
              class="quill-upload"
              :on-success="quillSuccess"
              :action="uploadUrl"
            >
              <!-- <el-button size="small" type="primary">点击上传</el-button> -->
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
              </div>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>

并设置此组件隐藏

设置选项

在 组件data 中加入如下配置

editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              // 重写点击组件上的图片按钮要执行的代码
              'image': function (value) {
                document.querySelector('.quill-upload .el-icon-upload').click()
              }
            }
          }

        }
      },

上面用到了 toolbarOptions ，这是定义工具栏的常量

const toolbarOptions = [
  ['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
  [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
  [{ direction: 'rtl' }], // text direction

  [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
  [{ header: [1, 2, 3, 4, 5, 6, false] }],

  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [{ font: [] }],
  [{ align: [] }],
  ['link', 'image', 'video'],
  ['clean'] // remove formatting button
]

插入图片

quillSuccess(response) {
      if(response){
      // 获取文本编辑器
      const quill=this.$refs.myQuillEditor.quill
      // 获取光标位置
      const pos=quill.getSelection().index
      // 插入图片到光标位置
      quill.insertEmbed(pos,'image',response.data.url)
      }else{
        this.$essage.error('图片插入失败')
      }
    },