background:
1. In some scenarios, some functions of vue-quill-editor default toolbar do not want to appear, and some functions need to be deleted.
-quill-editor's default image upload solution is to convert the image into base64 and store it in the content area, which will cause the content character to be too long and may not be able to be passed to the background for saving (in fact, this solution is not recommended even if it can be saved). So we need to modify the solution to upload the image to the server, and then access the image echo and use through the URL.
vue-quill-editor toolbar transformation and custom image upload (the upload component of element-ui is used here):
Introduce plug-ins (vue introduces vue-quill-editor and asks the dog lady by yourself)
vue html
<el-upload class="avatar-uploader quill-img" name="file"
:action="uploadImgUrl"
:show-file-list="false"
:headers="uploadHeaders"
:on-success="quillImgSuccess"
:before-upload="quillImgBefore"
accept='.jpg,.jpeg,.png,.gif'>
</el-upload>
<quill-editor ref="myTextEditor"
v-model=""
:options="editorOption">
</quill-editor>
vue js
editorOption: {
placeholder: 'Please enter it here...',
modules:{
toolbar:{
container: [
['bold', 'italic', 'underline', 'strike'],// Bold, italic, underlined, deleted ['blockquote'],// Quote [{ 'header': 1 }, { 'header': 2 }],// Title, the form of key-value pairs; 1 and 2 represent the font size [{ 'list': 'ordered'}, { 'list': 'bullet' }],//List [{ 'indent': '-1'}, { 'indent': '+1' }],// Indent [{ 'direction': 'rtl' }],// Text direction [{ 'size': ['small', false, 'large', 'huge'] }],// Font size [{ 'header': [1, 2, 3, 4, 5, 6, false] }],//How many levels of title [{ 'color': [] }, { 'background': [] }],// Font color, font background color [{ 'font': [] }],//Font [{ 'align': [] }],//Alignment ['clean'],//Clear font style ['image']//Upload pictures and videos ],
handlers: {
'image': function(val){
if(val){
('.quill-img input').click()
}else{
('image', false);
}
}
}
}
}
}
Custom upload redisplay
// Upload pictures of rich text editing boxes quillImgSuccess(res, file) {
// Get rich text component instance let quill = this.$;
// If uploading is successful if ( == '00001') {
// Get the cursor location let length = ().index;
// Insert the picture address returned by the server (length, 'image', '/static-resource/' + );// The URL here is the access path of the image, not the real physical path // Adjust the cursor to the end (length + 1)
} else {
this.$('Image insertion failed')
}
}
Verify picture format
quillImgBefore(file){
let fileType = ;
if(fileType === 'image/jpeg' || fileType === 'image/png'){
return true;
}else {
this.$('Please insert the image type file(jpg/jpeg/png)');
return false;
}
},
At this point, the work was completed. Only key steps are recorded here, please comment on unclear areas
! ! ! ! Notice:
During the transformation process of custom uploading pictures, if there are multiple rich text boxes and one page at the same time, it is necessary to ensure that the refs of each rich text and the corresponding upload are different.
Supplementary knowledge:Use quill-editor with style editor in Vue project (change insert pictures and videos) to write rich text editor using vue-quilt-editor Customize picture path Get back-end path in the background
1. First, introduce vue-quilt-editor
import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/' import 'quill/dist/' import 'quill/dist/'
Introduce vue-quilt-editor style otherwise the style will be garbled
2. Import dependencies
npm install vue-quilt-editor save
3. Use components
<el-col :span="24" class="warp-main" > <el-form-item > <div class="edit_container"> <quill-editor v-model="[object['description'].name]" ref="myQuillEditor" class="editer" :headers="headers" :options="editorOption" @ready="onEditorReady($event)"> </quill-editor> <el-upload class="upload-demo" :action="qnLocation" :before-upload='beforeUploadDetial' :data="uploadData" :on-success='upScuccess' :headers="headers" ref="upload" > <el-button size="small" type="primary" style="display:none">Click to upload</el-button> </el-upload> </div> </el-form-item> </el-col>
Bind v-model Add method Use the invisible upload button here to customize your own path headers bind the token uploaded image otherwise 401 will be reported
headers: {
'Authorization': 'Bearer ' + (('token')),
'Accept': 'application/json',
'X-TenantId': (('user')).tenantId
},
import { quillEditor } from 'vue-quill-editor' // Call the editor
Binding event for image upload button when mount
mounted () {
// ICON binding event for image getModule is the editor's internal propertythis.$('toolbar').addHandler('image', )
},
onEditorReady () {
},
// Clicking on the picture button will immediately call the upload of the invisible button
imgHandler (state) {
= this.$()
if (state) {
const fileInput = ('imgInput')
() // Add a trigger event}
= 'image'
},
beforeUploadDetial (file) {
// Functions called before uploading the image(file)
return (file)
},
qnUpload (file) {
= true
const suffix = ('.')
const ext = ( - 1, 1)[0]
()
if ( === 'image') { // If it is click to insert the picture = {
key: `image/${('.')}_${new Date().getTime()}.${ext}`
}
}
},
upScuccess (e, file, fileList) {
(e)
= false
const vm = this
let url = ''
if ( === 'image') { // Obtain the URL address after file uploadurl = Access path + e
}
if (url != null && > 0) { // Insert the URL address after uploading the file into the editor textlet value = url
= vm.$()
value = ('http') !== -1 ? value : 'http:' + value
vm.$( !== null ? : 0, , value, 'image') // Call the editor's insertEmbed method and insert the URL}
this.$refs['upload'].clearFiles() // Clear input content after insertion is successful},
The above article vue-quill-editor custom toolbar and custom image upload path operation is all the content I share with you. I hope you can give you a reference and I hope you can support me more.