在vue中使用quill-editor富文本编辑器（自定义工具栏、重写上传文件功能、工具栏中增加额外的功能按钮）

下面对quill-editor的使用包含了自定义工具栏、重写工具栏中的上传文件功能、在工具栏中新增额外的功能按钮

进入我们的项目文件夹，并打开命令行窗口，然后进行下面的步骤：
1、安装vue-quill-editor
输入命令：

npm install vue-quill-editor --save

main.js

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)
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')

3、使用插件
创建vue组件文件

QuillEditor.vue

<template>
<div>
<quill-editor
v-model="editorContent"
ref="quillEditor"
:options="editorOption"
></quill-editor>
<!--重写富文本编辑器中的上传图片功能 bg-->
<el-upload style="display:none"
:action="uploadImgUrl"
name="imgFile"
:show-file-list="false"
:before-upload='quillBeforeUploadFunc'
:on-success='quillUploadSuccess'
ref="quill-upload-img"
:id="'quill-upload-img-' + index"
>
</el-upload>
<!--重写富文本编辑器中的上传图片功能 end-->
</div>
</template>

<script>
import Axios from 'axios'
import { quillEditor } from 'vue-quill-editor' // 调用编辑器

var Quill = require('quill/dist/quill.js')
const IMAGE_TYPES = ['jpg', 'png', 'tif', 'gif', 'jpeg', 'icon']

// 定义富文本编辑器默认的工具栏列表项
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // 加粗、倾斜、下划线、删除线
[{'header': 1}, {'header': 2}], // 标题一、标题二
[{'list': 'ordered'}, {'list': 'bullet'}], // 列表
[{'color': []}, {'background': []}], // 字体颜色、背景颜色
[{'align': []}, 'image']
]

export default {
name: 'QuillEditor',
components: {
quillEditor
},
props: ['index', 'toolbarOptions', 'imgBase64'],  // 通过组件传值来由引用者定义富文本编辑器的工具条列表项和是否使用自带的上传图片功能
data () {
return {
uploadImgUrl: 'xxx',	// 上传图片的url，如果重写上传图片功能的话，该属性有用
editorContent: '',
takePhotoIcon: require('@/assets/take_photo_icon.png'),	// 给工具栏中新增加的拍照功能按钮的图标
editorOption: {
modules: {
toolbar: {
container: this.toolbarOptions || toolbarOptions, // 工具栏选项
handlers: {
takePhoto: this.openTakePhotoFunc // 拍照，takePhoto为工具栏中定义的名称
} // 事件重写
}
}
}
}
},
methods: {
initQuillEditorButtonFunc: function () {	// 初始化新增加的拍照功能按钮的样式
const pictureEle = document.querySelector('.ql-takePhoto')
if (pictureEle) {
pictureEle.style.cssText = 'width: 22px; height: 22px; background: url(' + this.takePhotoIcon + ') no-repeat center center; ' +
'background-size: 100%; margin-left: 15px;'
}
},
editQuillUploadImgEventFunc () {
const _this = this
let imgHandler = async function (state) {
if (state) {
let fileInput = document.querySelector('#quill-upload-img-' + _this.index + ' input') // 隐藏的file元素
fileInput.click() // 触发事件
}
}
this.$refs.quillEditor.quill.getModule('toolbar').addHandler('image', imgHandler)
},
quillBeforeUploadFunc (file) {
const fileNameArray = file.name.split('.')
const fileType = fileNameArray[fileNameArray.length - 1]
if (IMAGE_TYPES.indexOf(fileType.toLowerCase()) === -1) {
this.$message.error('请上传图片格式的文件！')
return false
}
},
quillUploadSuccess (response, file, fileList) {
console.log('========图片上传成功：')
console.log(response)
// 上传成功后的操作
// ...
let addImgRange = this.$refs.quillEditor.quill.getSelection()
this.$refs.quillEditor.quill.insertEmbed(addImgRange != null ? addImgRange.index : 0, 'image', response.url, Quill.sources.USER)
},
openTakePhotoFunc () {
if (window.javacamera) {
try {
let data = window.javacamera.TakePhoto()
if (data !== '' && data != null) {
data = 'data:image/jpeg;base64,' + data
if (!this.imgBase64) {
this.TakePhotoToUrlFunc(data)
} else {
this.editorContent = this.editorContent + '<img src="' + data + '"/>'
}
}
} catch (e) {
this.$message.error('不能进行拍照！')
console.log('不能进行拍照！' + e)
}
} else {
if (window.mycamera !== null) {
try {
window.mycamera.TakePhoto(data => {
if (data.indexOf('data:image/jpeg;base64,') > -1 && !this.imgBase64) {
this.TakePhotoToUrlFunc(data)
} else {
this.editorContent = this.editorContent + '<img src="' + data + '"/>'
}
})
} catch (e) {
this.$message.error('不能进行拍照！')
console.log('不能进行拍照！')
}
} else {
this.$message.error('不能进行拍照！')
console.log('不能进行拍照！')
}
}
},
TakePhotoToUrlFunc (data) {
// 通过后端将图片的base转为url
},
enableFunc (isEnable) {
this.$refs.quillEditor.quill.enable(isEnable)	 // 设置富文本编辑框是否禁用
}
},
mounted () {
if (!this.imgBase64) {	// 富文本编辑器自带的上传图片为base64的
this.editQuillUploadImgEventFunc()	// 使用自定义的上传图片功能
}
this.initQuillEditorButtonFunc()
}
}
</script>

<style scoped>

</style>

4、使用组件
在项目的界面中使用上面创建的QuillEditor组件，如下：

<template>
<QuillEditor
ref="quillEditor"
:index="0"
:toolbarOptions="toolbarOptions"
:imgBase64="true"
></QuillEditor>
</template>

<script>
import QuillEditor from '@/components/QuillEditor'

export default {
name: 'xxx',
components: {
QuillEditor
},
data () {
return {
toolbarOptions: [	// 自定义当前页面需要的工具栏
['image', 'takePhoto']	// takePhoto为新增的工具
]
}
}
}

</script>