最近在看ant-design框架，发现里面用到了vue-quill-editor，是一个富文本编辑器。

基于 Quill,适用于Vue的富文本编辑器,支持服务端渲染和单页应用.不过有一定的兼容性,就是兼容IE10+

vue-quill-editor 基于vue的富文本编辑器官网链接:https://www.npmjs.com/package/vue-quill-editor

下面记录一下使用方法：

1.安装——npm

npm install vue-quill-editor -S

2.挂载到项目中

全局挂载——在main.js文件中添加以下内容

// main.js

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

import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

Vue.use(VueQuillEditor, /* { default global options } */)

组件中挂载——在对应的组件中添加一下内容

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

import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  }
}

3.组件中使用quillEditor

<template>
  <quill-editor
    ref="myQuillEditor"
    v-model="content"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)"
  />    
</template>

4.在script中配置

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
export default {
  components: {
    quillEditor
  },
   data () {
      return {
        // 富文本编辑器默认内容
        content: '<h2>I am Example</h2>',
        //富文本编辑器配置
        editorOption: {
          // Some Quill options...
        }
      }
    },
    methods: {
      //失去焦点事件
      onEditorBlur(quill) {
        console.log('editor blur!', quill)
      },
      //获得焦点事件
      onEditorFocus(quill) {
        console.log('editor focus!', quill)
      },
      // 准备富文本编辑器
      onEditorReady(quill) {
        console.log('editor ready!', quill)
      },
      //内容改变事件
      onEditorChange({ quill, html, text }) {
        console.log('editor change!', quill, html, text)
        this.content = html
      }
    }
}

5.配置工具栏和事件重写

import Vue from 'vue'
//富文本编辑图片上传配置
const uploadConfig = {
	//action:'https://www.lumingtec.cn/Businesss/servicexxx'
	methods:'POST',//必填参数，图片上传方式
	token:'',//可选参数，如果需要token验证，假设你的token存放在sessionStorage
	name:'file',//必填参数，文件的参数名
	size:700,//可选参数，图片大小，单位为kb,1M=1024kb
	accept:'image/png,image/gif,image/jpeg,image/bmp,image/x-icon',//可选
	type:'audio/mp4,video/mp4'
}
//toolbar工具栏的工具选项(默认展示全部)
const toolOptions = [
	['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'],
	['link','image','video']
]
function uploadFilePic(quill,files,index){
	//创建formData
	var formData = new FormData()
	formData.append(uploadConfig.name,files[index])
	//如果需要token且存在token
	if(uploadConfig.token){
		formData.append('token',uploadConfig.token)
	}
	Vue.axios.post('/api/File/Upload',formData).then(response=>{
		console.log('upload response:',response);
		let url = response.Path
		let length = quill.getSelection().index
		quill.insertEmbed(length,'image',url)
		quill.setSelection(length+1)
		index+=1
		if(index<files.length){
			uploadFilePic(quill,files,index)
		}
	})
}
const handlers = {
	//配置上传图片
	image:function image(){
		var self = this
		var fileInput = this.container.querySSelector('input.ql-image[type=file]')
		if(fileInput===null){
			fileInput = document.createElement('input')
			fileInput.setAttribute('type','file')
			//设置图片参数名
			if(uploadConfig.name){
				fileInput.setAttribute('name',uploadConfig.name)
			}
			//可设置上传图片的格式
			fileInput.setAttribute('accept',uploadConfig.accept)
			fileInput.setAttribute('multiple','multiple')
			fileInput.classList.add('ql-image')
			//监听选择文件
			fileInput.addEventListener('change',function(){
				if(fileInput.files.length===0){
					return;
				}
				uploadFilePic(self.quill,fileInput.files,0)
			})
			this.container.appendChild(fileInput)
		}
		fileInput.click();
	},
	//配置上传视频
	video:function(){
		var self = this
		var fileInput = this.container.querySelector('input.ql-video[type=file]')
		if(fileInput===null){
			fileInput = document.createElement('input')
			fileInput.setAttribute('type','file')
			if(uploadConfig.name){
				fileInput.setAttribute('name',uploadConfig.name)
			}
			fileInput.setAttribute('accept',uploadConfig.type)
			fileInput.classList.add('ql-video')
			fileInput.addEventListener('change',function(){
				if(fileInput.files.length===0){
					return;
				}
				var formData = new FormData()
				formData.append(uploadConfig.name,fileInput.files[0])
				if(uploadConfig.token){
					formData.append('token',uploadConfig.token)
				}
				Vue.axios.post('/api/File/Upload',formData).then(response=>{
					console.log('upload response:',response)
					let url = response.Path
					let length = self.quill.getSelection().index
					self.quill.insertEmbed(length,'video',url);
				})
			})
			this.container.appendChild(fileInput)
		}
		fileInput.click()
	}
}
export default{
	placeholder:'',
	theme:'snow',//主题
	modules:{
		toolbar:{
			container:toolOptions,//工具栏选项
			handlers:handlers,//事件重写
		}
	}
}