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

怼烎@ 2022-09-04 09:43 234阅读 0赞

## 一、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"]
              }
            }
          },

## 五、结果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE1MzA2Mw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][e9b176d6a5b641098ad91feebef4ecc2.png]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE1MzA2Mw_size_16_color_FFFFFF_t_70]: /images/20220829/3074a76fc8054508a9059bd529c02a73.png
[e9b176d6a5b641098ad91feebef4ecc2.png]: /images/20220829/0803715da15a44c3bc9d8b85ca63a9f2.png