这个富文本需要装一下插件
"quill": "^1.3.6"
"quill-image-drop-module": "^1.0.3", //压缩图片
"quill-image-resize-module": "^3.0.0", //图片大小控制
"vue-quill-editor": "^3.0.6",
使用
webpack中加一下配置
plugins: [
new webpack.ProvidePlugin({
‘window.Quill‘: ‘quill/dist/quill.js‘,
‘Quill‘: ‘quill/dist/quill.js‘
})
],
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)
页面使用
<template>
<quill-editor
v-model="content"
:content="content"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
</quill-editor>
</template>
<script>
import { Quill } from ‘vue-quill-editor‘
import { ImageDrop } from ‘quill-image-drop-module‘
import ImageResize from ‘quill-image-resize-module‘
Quill.register(‘modules/imageDrop‘, ImageDrop)
Quill.register(‘modules/imageResize‘, ImageResize)
export default {
data () {
return {
name: ‘register-modules-example‘,
content: `1231`,
editorOption: {
modules: {
history: {
delay: 1000,
maxStack: 50,
userOnly: false
},
toolbar: [
[‘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] }],
[{ ‘font‘: [] }],
[{ ‘color‘: [] }, { ‘background‘: [] }],
[{ ‘align‘: [] }],
[‘clean‘],
[‘link‘, ‘image‘, ‘video‘]
],
imageDrop: true,
imageResize: {
displayStyles: {
backgroundColor: ‘black‘,
border: ‘none‘,
color: ‘white‘
},
modules: [ ‘Resize‘, ‘DisplaySize‘, ‘Toolbar‘ ]
}
}
}
}
},
methods: {
onEditorBlur (editor) {
// console.log(‘editor blur!‘, editor)
console.log(editor)
},
onEditorFocus (editor) {
// console.log(‘editor focus!‘, editor)
},
onEditorReady (editor) {
// console.log(‘editor ready!‘, editor)
}
}
}
</script>
自定义图片上传 参考处
toolbar: {
container: toolbarOptions,
handlers: {
‘image‘: function (value) {
if (value) {
// 调用element UI图片上传
document.querySelector(‘#uploadImg .el-upload‘).click()
} else {
this.quill.format(‘image‘, false)
}
}
}
},
handers处重写 图片的点击事件
触发 element 的 upload的点击事件
upload上传成功的回调事件
// 图片上传成功方法
handleSuccess (response, file, fileList) {
// 获取富文本组件实例
let quill = this.$refs.QuillEditor.quill
// 如果上传成功
if (response) {
// 获取光标所在位置
let length = quill.getSelection().index
// 插入图片，第三个参数为服务器返回的图片链接地址
quill.insertEmbed(length, ‘image‘, response.data.url)
// 调整光标到最后
quill.setSelection(length + 1)
} else {
// 提示信息，需引入Message
alert(‘图片插入失败‘)
}
}
代码
<template>
<div class="quill-editor">
<el-upload
class="upload-demo"
action="http://mock/2/api/richUpload"
accept=".jpg,.jpeg,.png,.gif]"
:headers="headers"
:show-file-list="false"
:on-success="handleSuccess"
:before-upload="beforeUpload"
id="uploadImg"
ref="uploadImg"
>
上传
</el-upload>
<quill-editor
v-model="content"
:content="content"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
ref="QuillEditor">
</quill-editor>
</div>
</template>
<script>
import { Quill } from ‘vue-quill-editor‘
import { ImageDrop } from ‘quill-image-drop-module‘
import ImageResize from ‘quill-image-resize-module‘
Quill.register(‘modules/imageDrop‘, ImageDrop)
Quill.register(‘modules/imageResize‘, ImageResize)
const toolbarOptions = [
[‘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] }],
[{ ‘font‘: [] }],
[{ ‘color‘: [] }, { ‘background‘: [] }],
[{ ‘align‘: [] }],
// [‘clean‘],
[‘link‘, ‘image‘, ‘video‘]
]
export default {
data () {
return {
name: ‘register-modules-example‘,
content: `1231`,
editorOption: {
modules: {
history: {
delay: 1000,
maxStack: 50,
userOnly: false
},
toolbar: {
container: toolbarOptions,
handlers: {
‘image‘: function (value) {
if (value) {
// 调用iview图片上传
console.log(document.querySelector(‘#uploadImg .el-upload‘))
document.querySelector(‘#uploadImg .el-upload‘).click()
console.log(value, 1231)
} else {
console.log(212222222222222)
this.quill.format(‘image‘, false)
}
}
}
},
imageDrop: true,
imageResize: {
displayStyles: {
backgroundColor: ‘black‘,
border: ‘none‘,
color: ‘white‘
},
modules: [ ‘Resize‘, ‘DisplaySize‘, ‘Toolbar‘ ]
}
}
},
headers: {
‘Authorization‘: ‘Bearer ‘ + sessionStorage.getItem(‘token‘)
}
}
},
methods: {
onEditorBlur (editor) {
// console.log(‘editor blur!‘, editor)
console.log(editor)
},
onEditorFocus (editor) {
// console.log(‘editor focus!‘, editor)
},
onEditorReady (editor) {
// console.log(‘editor ready!‘, editor)
},
// 上传之前加认证信息
beforeUpload () {
this.headers.Authorization = ‘Bearer ‘ + sessionStorage.getItem(‘token‘)
},
// 图片上传成功方法
handleSuccess (response, file, fileList) {
// 获取富文本组件实例
let quill = this.$refs.QuillEditor.quill
// 如果上传成功
if (response) {
// 获取光标所在位置
let length = quill.getSelection().index
// 插入图片，res为服务器返回的图片链接地址
quill.insertEmbed(length, ‘image‘, response.data.url)
// 调整光标到最后
quill.setSelection(length + 1)
} else {
// 提示信息，需引入Message
// Message.error(‘图片插入失败‘)
alert(‘图片插入失败‘)
}
}
}
}
</script>
原文：https://www.cnblogs.com/anxiaoyu/p/10869183.html