实现quill-editor富文本框在google chrome实现截图黏贴图片功能：
1、npm install quill-editor -- save
2、添加组件
<quill-editor v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
@change="onEditorChange">
</quill-editor>
3、引入相关文件及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:'',
editorOption:{}
};
},
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
}
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill
}
},
}
4、引用 image-paste 插件 实现谷歌浏览器图片黏贴功能
image-paste下载链接https://github.com/LiangCY/quill-image-paste；
可以直接 下载 image-paste.min.js
导入：import '../../assets/js/image-paste.min.js' ；配置editorOption参数
//paste image as base64 编辑器中插入的是base64的图片编码
editorOption:{
modules: {
imagePaste: { }
}
}
若是改为插入编辑器的图片url地址则
editorOption:{
modules: {
imagePaste: {
addImageBlob: function (blob, callback) {
var formData = new FormData()
formData.append('image', blob)
console.log(blob,callback)
// your upload function, get the uploaded image url, add then
let imageUrl = 'http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg'
callback(imageUrl)
}
}
}
}
5、在vue-loader.conf.js文件需要添加
var webpack = require('webpack');
plugins: [
new webpack.ProvidePlugin({
'window.Quill':'quill'
})
]
通过该流程配置可实现quill-editor富文本框在google chrome实现截图黏贴图片功能
网友评论