vue-quill-editor is a rich text editor that we often use when using the vue framework. When performing rich text editing, we often need to insert some images. The default processing method of vue-quill-editor is to directly convert the image into base64 encoding. The result is that the entire rich text html fragment is very redundant. Generally speaking, the data size of the post received by each server is limited, which may lead to the submission failure, or the user experience is very poor, and the data will take a long time to be transmitted to the server.
1. Download Vue-Quill-Editor
npm install vue-quill-editor --save
2. Download quill (Vue-Quill-Editor requires dependencies)
npm install quill --save
3. Use
import { quillEditor } from "vue-quill-editor"; //Calling the editorimport 'quill/dist/';
import 'quill/dist/';
import 'quill/dist/';
This time, I used rich text encapsulation and uploading pictures. Because I required to use the element-ui framework, when I uploaded the pictures, I chose the Upload upload component of element-ui to upload the pictures to the server. Then insert the image link into rich text to achieve the best experience.
The changed value in the child component is sent directly to the parent component, and the parent component completes the logical processing.
<template>
<div>
<el-upload // Just hide it directly, use functions but not styles v-show="false"
action="/api/product/"
name="upload_file"
multiple
:limit="3"
list-type="picture"
:show-file-list="false"
:before-upload="beforeUpload"
:on-error="uploadError"
:on-success="handleExceed">
<el-button size="small" type="primary" ></el-button>
<div slot="tip" class="el-upload__tip">Uploadable onlyjpg/pngdocument，And not more than500kb</div>
</el-upload>
<el-row v-loading="uillUpdateImg">
<quillEditor
ref="myQuillEditor"
@change="onEditorChange($event)"
v-model="value"
:options="editorOption"/>
</el-row>
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/'
import 'quill/dist/'
import 'quill/dist/'
export default {
name: "richText",
components:{quillEditor},
props:['content'], //The parent component is transmitted to render the transmitted to the rich text editor data(){
return{
uillUpdateImg:false, //Defend whether to display loading animation based on the upload status of the picture serverUrl:'', //Uploaded image server address value:, // Rich text content editorOption: { //Configuration of rune text editor placeholder: '',
theme: 'snow',
modules: {
toolbar: {
container: [ // Toolbar configuration, default is all ['bold'],
['italic'],
['underline'],
['strike'],
[{'list':'ordered'},{'list': 'bullet' }],
['blockquote'], ['code-block'],
['link'],
['image'],
[{'list': 'ordered'}, {'list': 'bullet'}],
],
handlers: {
'image': function (value) {
if (value) {
// Give a click to trigger the Element-ui, and select the image file in the input box ('#quill-upload input').click()
} else {
('image', false);
}
}
}
}
}
}
}
},
methods:{
onEditorChange({ quill, html, text }) { //When the content of the rich text editor changes = html
this.$emit('textChange',html) //Send text input from the rich text editor to the parent component. The parent component involves submitting addition or changes },
beforeUpload(){ // Turn on loading before uploading the picture = true
},
uploadError(){ //The upload of the image failed, close loading = false
this.$('Image insertion failed')
},
handleExceed(response, file, fileList){ //The image is added successfully let quill = this.$
(response)
if ( === 0) {
let length = ().index;
// Insert the picture address returned by the server (length, 'image', )
// Adjust the cursor to the end (length + 1)
}else{
this.$('Image insertion failed')
}
= fileList
= false
},
}
}
</script>
<style scoped>
</style>
The handlers in the configuration are used to define custom programs, but after we configure, we will be confused and find that the image upload buttons of the entire rich text editor toolbar are gone, and only a few basic rich text functions are retained.
This is because adding a custom handler will override the default toolbar and theme behavior
Therefore, we need to configure the toolbar we need by ourselves. The configuration of all functions is as follows. You can configure it on demand. There are a lot of things here, and it is not beautiful. You can also configure a separate config file to introduce it.
There is a point of note that the value in the child component is passed into the parent component, and the child component changes to it and then pass it to the parent component. When storing variables in the props attribute, we call variables the same as those in data, and they are called through this. variables. This problem is that the variables passed to the child component of the parent component cannot be changed directly by this. variables. We need to redefine a variable in the data or computed attributes, or listen to props accept changes in variables. Change the variables in the data or computed attributes and will not report an error.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.