vue富文本编译器

第一步：安装扩展包

```javascript
npm install vue-quill-editor quill-image-extend-module vue-quill-editor-upload quill-image-resize-module --save

第二步：在main里面引入
// 引入富文本样式

```javascript
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

第三步：直接在components里面封装quill.vue一个组件

里面的代码如下

<template>
    <div class="quill">
        <quill-editor
            v-model="context"
            ref="myQuillEditor"
            :options="editorOption"
            @input="$emit('update:value', $event)"
        >
        </quill-editor>
    </div>
</template>

<script>
import {quillEditor, Quill} from 'vue-quill-editor';
import {container, ImageExtend, QuillWatch,} from 'quill-image-extend-module';
import {quillRedefine} from 'vue-quill-editor-upload';
import  ImageResize  from 'quill-image-resize-module';
Quill.register('modules/ImageResize', ImageResize )
Quill.register('modules/ImageExtend', ImageExtend);
export default {
    mounted () {
        this.context = this.value;
    },
    props:{
        value:{
            type:String,
        },
    },
    data() {
        return {
            context:'',
            // 富文本框参数设置
            editorOption: {
                modules: {
                    ImageExtend: {  // 如果不作设置，即{}  则依然开启复制粘贴功能且以base64插入
                        name: 'fileFile',  // 图片参数名
                        size: 5,  // 可选参数 图片大小，单位为M，1M = 1024kb
                        action:'',  // 服务器地址, 如果action为空，则采用base64插入图片
                        // response 为一个函数用来获取服务器返回的具体图片地址
                        // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}} 则 return res.data.url
                        response: (res) => {// 图片上传成功或错误 回调方法 成功后将图片地址return出去
                            return res.filePath;
                        },
                        headers: (xhr) => { // 可选参数 设置请求头部
                            //    xhr.setRequestHeader('Content-Type','multipart/form-data')
                        }, 
                        sizeError: () => {},  // 图片超过大小的回调
                        start: () => {},  // 可选参数 自定义开始上传触发事件
                        end: () => {},  // 可选参数 自定义上传结束触发的事件，无论成功或者失败
                        error: () => {},  // 可选参数 上传失败触发的事件
                        success: () => {
                        },  // 可选参数  上传成功触发的事件
                        change: (xhr, formData) => {
                            // xhr.setRequestHeader('myHeader','myValue')
                            // formData.append('token', 'myToken')
                        } // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
                    },
                    toolbar: {  // 如果不上传图片到服务器，此处不必配置
                        container: container,  // container为工具栏，此次引入了全部工具栏，也可自行配置
                        handlers: {
                            'image': function (value) {  // 劫持原来的图片点击按钮事件 自定义图片上传
                                // if (value) {
                                //     // 触发input框选择图片文档
                                //     document.querySelector('.avatar-uploader input').click()
                                // } else {
                                //     this.quill.format('image', false);
                                // }
                                QuillWatch.emit(this.quill.id)
                            }
                        }
                    },
                    ImageResize: { //调整上传过后图片大小配置。
                        displayStyles: {
                            backgroundColor: 'black',
                            border: 'none',
                            color: 'white'
                        },
                        modules: [ 'Resize', 'DisplaySize','Toolbar' ]
                    },
                },
            }
        }
    },
    methods: {
    },
    watch: {
        // 页面
        value(newVAlue){
            this.context = newVAlue;
        },
    },
    filters: {},
    computed: {},
    components: {
        quillEditor,
        quillRedefine, 
        Quill 
    }
}
</script>
<style lang="less" scoped>

</style>

最后页面中使用方式

<div>
 <quill :value.sync="value"></quill>
</div>

<script>
//先引用
import  Quill from '@/components/quill.vue'
//在data里面定义value
data(){
	return{
		value:''//这个也就是富文本里面的内容
	}
},
components: { 
     Quill
  }
</scripr>

最重要的一点此时会报错

TypeError: Cannot read property ‘imports’ of undefined

解决办法

//在webpack.base.conf.js文档下
1. 添加：
const webpack=require('webpack');
2. module.exports = { 
    context: path.resolve(__dirname, '../'),
    entry：{},
    output:{},
    // 在这里添加 请不要放在output前面 那样会报错
    plugins: [
        new webpack.ProvidePlugin({
            'window.Quill': 'quill/dist/quill.js',
            'Quill': 'quill/dist/quill.js'
        }),
    ],
    resolve:{},
    ···
}

很多vue的项目没webpack.base.conf.js这个文件则在vue.config.js里面修改


代码

const webpack = require('webpack')

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