1、安装
npm install vue-quill-editor --save
2、全局引用和局部引用
1.全局引入
import VueQuillEditor from 'vue-quill-editor'
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
2.局部引入
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.关于事件和参数
修改上传功能，自定义上传图片、视频、音频
3.1编辑器配置文件 /utils/quill-config.js
import axios from 'axios'
import { Quill } from 'vue-quill-editor';
// import { fileUpload } from '@/api/exam/personalInfo'
/*富文本编辑图片上传配置*/
const uploadConfig = {
// action: 'https://www.lumingtec.cn/Business/serviceInterface/fileUpload.json', // 必填参数 图片上传地址
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']
]
var Link = Quill.import('formats/link');
class FileBlot extends Link { // 继承Link Blot
static create(value) {
let node = undefined
if (value&&!value.href){ // 适应原本的Link Blot
node = super.create(value);
}
else{ // 自定义Link Blot
node = super.create(value.href);
// node.setAttribute('download', value.innerText); // 左键点击即下载
node.innerText = value.innerText;
node.download = value.innerText;
}
return node;
}
}
FileBlot.blotName = 'link';
FileBlot.tagName = 'A';
Quill.register(FileBlot);
const handlers = {
link: function(value) {
if(value){
document.querySelector('#quill-uploadFolder input').click()
}else{
this.quill.format('link', false);
}
},
//配置上传图片
image: function image(value) {
if(value){
document.querySelector('#quill-upload input').click()
}else{
this.quill.format('image', false);
}
},
//配置上传视频
video: function(value) {
if(value){
document.querySelector('#quill-uploadFolder input').click()
}else{
this.quill.format('video', false);
}
},
}
export default {
placeholder: '请编辑',
theme: 'snow', // 主题
modules: {
toolbar: {
container: toolOptions, // 工具栏选项
handlers: handlers // 事件重写
}
}
}
3.2父页面代码
<template>
<div>
<upload-imgBox v-show="false" @upImgDone='upImgDone' @beforeUpload='beforeUpload'></upload-imgBox>
<upload-fileBox v-show="false" @upFileDone='upFileDone' @beforeUpload='beforeUpload'></upload-fileBox>
<el-form-item label="正文" prop="content">
<quill-editor ref="myTextEditor" v-model="temp.content" :options="editorOption" v-loading="uillUpdateImg"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
@change="onEditorChange($event)">
</quill-editor>
</el-form-item>
</div>
</template>
<script>
import uploadImgBox from '@/components/upload/uploadImg.vue'
import uploadFileBox from '@/components/upload/uploadFolder.vue'
import quillConfig from '@/utils/quill-config'
export default {
components:{
uploadImgBox,
uploadFileBox
},
data() {
return {
uillUpdateImg:false,
editorOption:quillConfig,
}
},
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 }) {
this.temp.content = html;
},
beforeUpload(){
this.uillUpdateImg = true
},
upImgDone(res){
console.log('upImgDone',res)
this.uillUpdateImg = false
let url = res.data.url
let quill = this.$refs.myTextEditor.quill
let length = quill.getSelection().index //获取当前鼠标焦点位置
quill.insertEmbed(length, 'image',url)
quill.setSelection(length + 1)
},
upFileDone(res){
this.uillUpdateImg = false
let url = res.data.url
let quill = this.$refs.myTextEditor.quill
let length = quill.getSelection().index //获取当前鼠标焦点位置
let type = this.getFileType(res.data.extension)
if(type =='video'){
quill.insertEmbed(length, 'video',url)
}else{
quill.insertEmbed(length, 'link', {href:url, innerText:res.data.filename}, "api")
quill.setSelection(length + res.data.filename.length)
}
},
}
</script>
3.3子组件页面代码上传图片/上传视频
<template>
<div>
<el-upload
id="quill-upload"
ref="uploadImg"
:http-request="httpFileRequest"
:show-file-list="false"
action=""
multiple
:before-upload="beforeUpload"
:on-error="uploadError"
:on-success="handleExceed"
>
<el-button icon="el-icon-upload">上传图片</el-button>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
uillUpdateImg: false
}
},
methods: {
beforeUpload() {
this.$emit('beforeUpload')
this.uillUpdateImg = true
},
uploadError() { // 图片上传失败,关闭loading
this.uillUpdateImg = false
this.$message.error('图片插入失败')
},
handleExceed(response, file, fileList) { // 图片添加成功
console.log('s上传图片', response)
},
httpFileRequest(obj) { // 上传到后端
const that = this
var formData = new FormData()
formData.append('uploadImage', obj.file)
that.$axios({
withCredentials: true,
method: 'POST',
url: 'api/upload/image.do',
headers: {
'Content-Type': 'multipart/form-data',
},
data: formData
}).then(Response => {
// console.log('s上传图片',Response)
const res = Response.data
if (res.code == '0') {
that.$notify({ title: '成功', message: '上传成功', type: 'success' })
that.$refs.uploadImg.value = null
that.uillUpdateImg = false
that.$emit('upImgDone', res)
} else {
that.$notify.error({ title: '错误', message: res.message })
}
}).catch(err => {
})
}
}
}
</script>
<style>
</style>
网友评论