VUE-QUILL-EDITOR安装与调节图片大小记录

一、quill-editor安装

安装quill-editor

npm install vue-quill-editor --save

安装调节图片大小插件(不是必须的，看需求)

npm install quill-image-resize-module -S

二、 引用（两种方式）

1. 全局引用 在main.js中填入以下代码

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
//一定要引入这三个css，不然文本编辑器会出现不规则黑白几何图形
//这三个css可以在main.js中引入，也可以在具体使用的.vue文件中引入
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
Vue.use(VueQuillEditor)

2.局部引用 在需要的组件内引用(如果不需要imageResize去掉即可)

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import imageResize from "quill-image-resize-module";
import VueQuillEditor, { Quill, quillEditor } from "vue-quill-editor";
Quill.register("modules/imageResize", imageResize);

三、配置(解决impots报错等问题)

1.在Vue-cli2.0中的webpack.dev.conf.js中

plugins[]中加入以下代码：

new webpack.ProvidePlugin({
      'window.Quill': 'quill/dist/quill.js',
      'Quill': 'quill/dist/quill.js'
    }),

2.在Vue-cli3.0中的vue.config.js文件中(如果没有创建一个，与src同级)

加入以下代码

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'
	    }]);
	}
}

四、使用

在template中使用

<quill-editor v-model="content"
                      :options="editorOption"
                      v-model="data"
>
        </quill-editor>

data中

	  data: "",
      editorOption: {
        placeholder: "请输入...",
        modules: {
          toolbar: [
            [{ color: [] }, { background: [] }],
            ["bold", "italic", "underline", "strike"],
            [{ size: ["small", false, "large"] }],
            ["bold", "italic"],
            [{ list: "ordered" }, { list: "bullet" }],
            [{ script: "sub" }, { script: "super" }],
            [{ indent: "-1" }, { indent: "+1" }],
            [{ direction: "rtl" }],
            [{ header: 1 }, { header: 2 }],
            [{ list: "ordered" }, { list: "bullet" }],
            ["link", "image"],
            ["blockquote", "code-block"],
            [{ font: [] }],
            [{ align: [] }]
          ],
          imageResize: {
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white"
            },
            modules: ["Resize", "DisplaySize", "Toolbar"]
          }
        }
      },

五、结果

至此，结束，记录一下，希望能帮助到你。