quill是个不错的富文本编辑器,但是它的图片上传是直接将本地图片读成base64跟文本混合在一起,这显然不适合一般开发需求,我们希望插入的是一个图片url,故这里将基于vue.js实现quill的图片上传功能。
没有什么好说的,直接贴代码
quillEditor.vue
<template>
<div>
<quilleditor v-model="content"
ref="myTextEditor"
:options="editorOption"
@change="onChange">
<div id="toolbar" slot="toolbar">
<span class="ql-formats"><button type="button" class="ql-bold"></button></span>
<span class="ql-formats"><button type="button" class="ql-italic"></button></span>
<span class="ql-formats"><button type="button" class="ql-blockquote"></button></span>
<span class="ql-formats"><button type="button" class="ql-list" value="ordered"></button></span>
<span class="ql-formats"><button type="button" class="ql-list" value="bullet"></button></span>
<span class="ql-formats"><button type="button" class="ql-link"></button></span>
<span class="ql-formats">
<button type="button" @click="imgClick" style="outline:none">
<svg viewBox="0 0 18 18"> <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect> <circle class="ql-fill" cx="6" cy="7" r="1"></circle> <polyline class="ql-even ql-fill" points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"></polyline> </svg>
</button>
</span>
<span class="ql-formats"><button type="button" class="ql-video"></button></span>
</div>
</quilleditor>
</div>
</template>
<script>
import {quillEditor} from 'vue-quill-editor'
export default {
props:{
value:{
type:String
},
/*上传图片的地址*/
uploadUrl:{
type:String,
default:'http://localhost/test/upload.php'
},
/*上传图片的file控件name*/
fileName:{
type:String,
default: 'upload_file'
}
},
data() {
return {
content: '',
editorOption: {
modules: {
toolbar: '#toolbar'
}
},
}
},
methods: {
onChange(){
this.$emit('input', this.content)
},
/*选择上传图片切换*/
onFileChange(e){
var self=this
var fileInput=e.target
if(fileInput.files.length==0){
return
}
this.editor.focus()
if(fileInput.files[0].size>1024*1024*100){
this.$alert('图片不能大于600KB', '图片尺寸过大', {
confirmButtonText: '确定',
type: 'warning',
})
}
var data=new FormData
data.append(this.fileName,fileInput.files[0])
this.axios.post(this.uploadUrl,data).then(function(res){
if(res.data) {
self.editor.insertEmbed(self.editor.getSelection().index, 'image', res.data.url)
}
})
},
/*点击上传图片按钮*/
imgClick() {
if(!this.uploadUrl){
console.log('no editor uploadUrl')
return;
}
/*内存创建input file*/
var input=document.createElement('input')
input.type='file'
input.name=this.fileName
input.accept='image/jpeg,image/png,image/jpg,image/gif'
input.οnchange=this.onFileChange
input.click()
}
},
computed:{
editor() {
return this.$refs.myTextEditor.quill
}
},
components: {
'quilleditor': quillEditor
},
mounted(){
this.content=this.value
},
watch:{
'value'(newVal, oldVal) {
if (this.editor) {
if (newVal !== this.content) {
this.content = newVal
}
}
},
}
}
</script>
图片上传地址改成自己的
我在main.js里引入了axios,所以这里可以直接使用this.axios,根据你的配置做适当调整即可
最后感谢这位大神的分享:vue-quill-editor自定义图片上传
今天的文章quill自定义图片上传分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/7261.html