vue2中使用vue-quill-editor实现编辑器

1 参考文档

开发文档

https://github.com/surmon-china/vue-quill-editor

例子

vue-quill-editor | Homepage | Surmon's projects

中文开发文档

前言 · Quill官方中文文档 · 看云

版本号（注意：不适用于vue3）

 "quill": "^1.3.7",
 "quill-image-drop-module": "^1.0.3",
 "quill-image-resize-module": "^3.0.0",
 "vue": "^2.6.11",
 "vue-quill-editor": "^3.0.6"

2 截图

3 源代码

3.1 vue.config.js

// 解决import模块quill-image-resize-module错误
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'
        }]);
    }
}

3.2 vue源代码

<template>
  <div>
    <quill-editor
      ref="myTextEditor"
      v-bind:options="editorOption"
      v-model="content">
    </quill-editor>
  </div>
</template>
 
<script>
​
// 设置基本的编辑框
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 'vue-quill-editor'
// 设置调整图片大小
import ImageResize from "quill-image-resize-module";
Quill.register("modules/imageResize", ImageResize);
// 设置拖拽
import { ImageDrop } from "quill-image-drop-module";
Quill.register("modules/imageDrop", ImageDrop);
​
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      content: "Hello quill",
      editorOption: null
    }
  },
  created: function(){
    // 工具栏配置
    const toolbarOption = [
      ["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: [] }],
      ["clean"],
      ["image", "video"]
    ];
​
    this.editorOption = {
        theme: "snow",
        placeholder: "请输入正文",
        modules: {
          // 设置拖拽
          imageDrop: true,
​
          //设置图片大小, 也可以使用"imageResize:true"，官网上采用的是下面的配置方式
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
          },
​
          toolbar: {
            container: toolbarOption
          }
        }
      }
  }
}
</script>
 
<style>
</style>