Vue+element UI +vue-quill-editor Rich Text picture upload to ride Qiniu

Source: Internet
Author: User
Tags file url

Vue-quill-editor upload image will be converted to Base64 format, but this is not what we want, and then turned a lot of articles to find the desired, the following directly on the code

<style lang= "Sass" >
. quill-editor
min-height:500px
Background: #fff
. Ql-container
min-height:500px

. Ql-snow. Ql-editor img
max-width:480px

. Ql-editor. Ql-video
max-width:480px
</style>

<template>
<div>
<!--quill-editor Plug-in tags bind each event individually--
<quill-editor v-model= "Content" ref= "myquilleditor": options= "editoroption" @change = "Oneditorchange ($event)" >
</quill-editor>
<!--file Upload input to hide it-
<el-upload class= "Upload-demo": action= "qnlocation": before-upload= ' beforeupload ':d ata= "uploadData": on-success = ' upscuccess '
ref= "Upload" style= "Display:none" >
<el-button size= "small" type= "primary" id= "Imginput" element-loading-text= "INSERT, please wait" > click Upload </el-button>
</el-upload>
</div>

</template>

<script>
Import Quill from ' Quill '
Const Staticdomain = ' http://otq0t8ph7.bkt.clouddn.com/'//image server domain name, display when used
Const STATVIDEO = ' http://otq0t8ph7.bkt.clouddn.com/'

Export Default {
Data () {
return {
Content: ",//articles
Editoroption: {
PLACEHOLDER: ' Please enter content ',
Modules: {//Configure Rich Text
Toolbar: [
[' Bold ', ' italic ', ' underline ', ' strike '],
[' blockquote ', ' Code-block '],
[{' Header ': 1}, {' Header ': 2}],
[{' Direction ': ' RTL '}],
[{' Size ': [' small ', false, ' large ', ' huge '}],
[{' Header ': [1, 2, 3, 4, 5, 6, false]}],
[{' Color ': []}, {' Background ': []}],
[{' Font ': []}],
[{' Align ': []}],
[' Clean '],
[' link ', ' Image ', ' video ']
]
}
},
AddRange: [],
Uploaddata: {},
Photourl: ",//Upload image Address
Uploadtype: "//uploaded file type (image, video)
}
},
Computed: {
Upload seven Cattle actiond address, HTTP and HTTPS are not the same
Qnlocation () {
return Location.protocol = = = ' http: '? ' http://upload.qiniu.com ': ' https://up.qbox.me '
}
},
Methods: {
Functions that were taken before the image was uploaded
This hook also supports promise
Beforeupload (file) {
return This.qnupload (file)
},
Get data token data before uploading images
Qnupload (file) {
This.fullscreenloading = True
Const suffix = file.name.split ('. ')
CONST EXT = Suffix.splice (suffix.length-1, 1) [0]
Console.log (This.uploadtype)
if (This.uploadtype = = = ' image ') {//If it is clicked Insert Picture
TODO picture format/size limit
Alert (' Upload image ')
return this. The $axios (' Common/get_qiniu_token '). Then (res = {
This.uploaddata = {
Key: ' Image/${suffix.join ('. ')} _${new Date (). GetTime ()}.${ext} ',
Token:res.data
}
})
} else if (this.uploadtype = = = ' Video ') {//If you are clicking Insert Video
return this. The $axios (' Common/get_qiniu_token '). Then (res = {
This.uploaddata = {
Key: ' Video/${suffix.join ('. ')} _${new Date (). GetTime ()}.${ext} ',
Token:res
}
})
}
},

Image upload successful callback inserted into the editor
Upscuccess (E, file, fileList) {
Console.log (e)
This.fullscreenloading = False
Let VMS = this
Let url = ' '
if (This.uploadtype = = = ' image ') {//Get the URL address after file upload
url = staticdomain + e.key
} else if (this.uploadtype = = = ' Video ') {
url = statvideo + e.key
}
if (URL! = null && url.length > 0) {//upload the file URL into the editor text
Let value = URL
api:https://segmentfault.com/q/1010000008951906
this. $refs. MyTextEditor.quillEditor.getSelection ();
Gets the cursor position object, which has two properties, one is index and a length, here to use Range.index, that is, the content length before the current cursor, and then use insertembed (length, ' image ', IMAGEURL), You can insert a picture.
Vm.addrange = vm. $refs. MyQuillEditor.quill.getSelection ()
Value = Value.indexof (' http ')!==-1? Value: ' http: ' + value
VMs. $refs. myQuillEditor.quill.insertEmbed (vm.addrange!== null? vm.addrange.index:0, Vm.uploadtype, value, Quill.sources.USER)//Call the Insertembed method of the editor, insert the URL
} else {
this. $message. Error (' ${vm.uploadtype} Insert failed ')
}
this. $refs [' Upload '].clearfiles ()//erase the contents of input after successful insertion
},

Click on the image icon to trigger the event
Imghandler (state) {
This.addrange = this. $refs. MyQuillEditor.quill.getSelection ()
if (state) {
Let FileInput = document.getElementById (' imginput ')
Fileinput.click ()//plus a trigger event
}
This.uploadtype = ' image '
},
Oneditorchange ({editor, HTML, text}) {
Console.log (' editor change! ', HTML)
This.content = html
},
Click on the video icon to trigger the event
Videohandler (state) {
This.addrange = this. $refs. MyQuillEditor.quill.getSelection ()
if (state) {
Let FileInput = document.getElementById (' imginput ')
Fileinput.click ()//plus a trigger event
}
This.uploadtype = ' video '
}
},
Created () {
this. $refs = {
Myquilleditor:htmlinputelement,
Imginput:htmlinputelement
}
},
After the page loads, executes the image icon for the editor and the video icon to bind the point-and-click event
Mounted () {
Bind event GetModule for picture icon to internal property of editor
Console.log (this. $refs. Myquilleditor.quill)
this. $refs. MyQuillEditor.quill.getModule (' toolbar '). AddHandler (' image ', This.imghandler)
this. $refs. MyQuillEditor.quill.getModule (' toolbar '). AddHandler (' video ', This.videohandler)//Bind event for video icon
}
}
</script>

Reference article:

https://github.com/surmon-china/vue-quill-editor/issues/102

Vue+element UI +vue-quill-editor Rich Text picture upload to ride Qiniu

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.