Tutorials for use (note that you read the summary section carefully, and wrote a few points, I hope it will be helpful):
1. Install plug-in:npm install vue-quill-editor
2. Install plug-in dependencies:npm install quill
3. Introduced in the file:
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/'
import 'quill/dist/'
import 'quill/dist/'
(VueQuillEditor)
new Vue({
VueQuillEditor,
render: h => h(App),
}).$mount('#app')
4. Used in the vue page (the code is complete, you can use it by copying):
<template>
<div >
<el-upload
class="avatarUploader"
action="/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<quill-editor
ref="myQuillEditor"
v-model=""
:options="editorOption"
@change="handelEditorChange($event)"
>
</quill-editor>
</div>
</template>
<script>
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], //Bold, italic, underline, delete line ['blockquote', 'code-block'], //References, code blocks [{ header: 1 }, { header: 2 }], //Title, the form of key-value pairs; 1 and 2 represent the font size [{ list: 'ordered' }, { list: 'bullet' }], //List [{ script: 'sub' }, { script: 'super' }], //Upgrade and lower mark [{ indent: '-1' }, { indent: '+1' }], //indentation [{ 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, upload videos (video), hyperlinks (link)]
export default {
data() {
return {
imageUrl: '',
editeContent: '',
editorOption: {
modules: {
clipboard: {
// Paste version, the built-in style when handling pasting matchers: [[Node.ELEMENT_NODE, ]],
},
toolbar: {
container: toolbarOptions, // Toolbar handlers: {
image: function(value) {
if (value) {
// Get the class of the hidden uploaded image, not necessarily .el-icon-plus. Trigger upload image event ('.el-icon-plus').click()
} else {
('image', false)
}
},
},
},
},
placeholder: '',
},
}
},
computed: {},
async mounted() {},
methods: {
handleAvatarSuccess(res, file) {
// Callback after image upload is successful (res, file)
},
beforeAvatarUpload(data) {
// Idea: After uploading the picture to the service, get the returned picture address. Create the image tag directly where the cursor is inserted // Image upload service (local service or Alibaba Cloud service) // Get rich text component instance let quill = this.$
// After the upload service is successful, press the image to insert the editor according to the cursor position if () {
// Get the location of the cursor, indicating the image address returned after uploading the service let length = ().index
// Insert the image, the image link address returned for the service (length, 'image', )
// Adjust the cursor to the end (length + 1)
} else {
this.$()
this.$('Image insertion failed')
}
},
handelEditorChange(el) {
(el, 'el')
},
HandleCustomMatcher(node, Delta) {
// Text, pictures, etc. are copied from elsewhere, clear the built-in style and convert it to plain text let ops = []
(op => {
if ( && typeof === 'string') {
({
insert: ,
})
}
})
= ops
return Delta
},
},
}
</script>
<style scoped lang="scss">
#quillEditorId {
.avatarUploader {
display: none; // Hide upload image component }
}
</style>
Summarize:
1. The variable toolbarOptions represents a custom toolbar. You can refer to the official website (the official website is relatively simple to write) or read the code in this article (with detailed notes);
2. If the picture is not processed separately, the picture will be directly escaped into base64 and uploaded to the service with the DOM;
3. This article has customized the image. When selecting a local image, it will be uploaded to the service separately. After returning the address, it will be directly inserted into the current node in rich text editing. Look at the image function of the handlers of the editorOption in the code, as well as the current cursor function beforeAvatarUpload inserted into the rich text editor, and there are detailed comments in the code;
4. Paste the board, variable clipboard. If you need to clean up the copied style, use the paste board to clean it, and function HandleCustomMatcher;
5. Say one more thing about copying and pasting. During the process, the editor has converted the original DOM into the DOM element allowed by the editor, so this part does not need to be processed (it will be a bit complicated to process).
This is the article about Vue using the rich text editor Vue-Quill-Editor (including image custom upload service, clear copy and paste style, etc.). For more related content of Vue rich text editor Vue-Quill-Editor, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!