Quill Editor

VUE-QUILL-EDITOR

该文章仅记录学习过程，不展示最终文件源码

安装 quill-editor

在对应的目录打开 Terminal 执行以下命令：

1. 安装 editor

npm install vue-quill-editor --save

2. 安装 resize plugin

npm install quill-image-resize-module -S

3. 安装 drop plugin

npm install quill-image-drop-module -S

引用 (There are two ways)

全局引用 (Way 1)

在 main.js 文件中填入以下代码：

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

其中引入的三个 css 必须要有，否则富文本编辑器会出现不规则的黑白几何图形

这三个 css 可以在 main.js 中引入， 也可以在具体使用的 vue 中引入， 但必须有其中之一

局部引用 (Way 2)

在具体使用的 vue 文件中写入以下内容：

import "quill/dist/quill.core.css"; 
import "quill/dist/quill.snow.css"; 
import "quill/dist/quill.bubble.css"; 
import VueQuillEditor, { Quill, quillEditor } 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);

配置问题 (imports 报错)

Way1

在该项目的 build/webpack.base.conf.js 文件中的 plugin[] 中添加以下内容：

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

Way2 (Recommend)

在根目录的 vue.config.js 文件中添加以下内容：

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

使用 QUILL EDITOR

如果要使用图片与视频的上传功能，请在此之前完成上传组件，为其 class 赋值，并隐藏该组件

<template>
	<quillEditor v-model="content"
				 :options="editorOption" 
				 v-model="data">
	</quillEditor>
</template>

export default {  
    components: {  
        quillEditor  
    },
    data(){
		return {
			data: "",
		    editorOption: {
		        placeholder: "请输入...",
		        modules: {
			        toolbar:{  
					    container: [
						    ['bold', 'italic', 'underline', 'strike'],          // FONT STYLE
							['blockquote', 'code-block'],                       // CODE BLOCK
					        [{ 'header': 1 }, { 'header': 2 }],                 // TITLE STYLE
					        [{ 'list': 'ordered'}, { 'list': 'bullet' }],       // LIST
					        [{ 'script': 'sub'}, { 'script': 'super' }],        // SUPERSCRIPT SUBSCRIPT
					        [{ 'indent': '-1'}, { 'indent': '+1' }],            // INDENT
					        [{ 'direction': 'rtl' }],  
					        [{ 'size': ['small', false, 'large', 'huge'] }],    // FONT SIZE
					        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],          // TITLE TYPE
					        [{ 'color': [] }, { 'background': [] }],  
					        [{ 'font': [] }],  
					        [{ 'align': [] }],  
					        ["link", "image", "video"],                         // LINK IMAGE VIDEO
					        ['clean']                                           // CLEAN FORMAT 
					    ],
					    handlers:{  
						    'image': function(val){  
						        if(val){  
						            console.log(val)  
						            document.querySelector('.el-upload').click()  // Select Your Upload Component And Click It. (This is just an example~)
						  
						        } else{  
						            console.log(val)  
						        }  
						    }  
						}
					},
				    imageResize: {
			            displayStyles: {
				            backgroundColor: "black",
				            border: "none",
				            color: "white"
			            },
			            modules: ["Resize", "DisplaySize", "Toolbar"]
			        },
			        imageDrop: true
		        }
		    }
		}
	}
}

请留意代码中的部分注释