Vue uses vue-quill-editor rich text editor and uploads pictures to the server

npm install vue-quill-editor --save or yarn add vue-quill-editor

<div>
 <quill-editor
 v-model="value"
 ref="myQuillEditor"
 :options="editorOption"
 @change="onEditorChange"
 >
 </quill-editor>
 <input type="file" hidden accept=".jpg,.png" ref="fileBtn" @change="handleChange" />
</div>

editorOption: {
 toolbar: [
 ['bold', 'italic', 'underline'], // bold, italic, underline, strikethrough, 'strike'
 ['blockquote', 'code-block'], //Quote, code block [{ 'header': 1 }, { 'header': 2 }], //H1 H2
 : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
}

mounted() {
 if (this.$refs.myQuillEditor) {
 //Change myQuillEditor to your own this.$refs.myQuillEditor.quill.getModule("toolbar").addHandler("image", this.imgHandler);
 }
},
methods:{
 imgHandler(state) {
 if (state) {
 		//Trigger the click of input, replace fileBtn with its own this.$refs.fileBtn.click()
 }
 }
}

handleChange(e) {
 const files = Array.prototype.slice.call(e.target.files);
 if (!files) {
 return;
 }
 let formdata = new FormData();
 formdata.append("file_name", files[0].name);
 formdata.append("imgs", files[0]);
 //Using axios request this.axios({
 url: this.$store.state.baseUrl + 'upload/ueditorFile',
 method: 'post',
 data: formdata,
 headers: {'client-identity': localStorage.getItem('session_id')}
 }).then((res) => {
 	//Setting it to empty here is to trigger the change event when uploading the same picture this.$refs.fileBtn.value = "";
 if (res.data.code == 200) {
  let selection = this.$refs.myQuillEditor.quill.getSelection();
  //This is the returned image address. If the interface does not return an accessible address, you need to concatenate it yourself. let imgUrl = this.$store.state.baseUrl + res.data.data; 
  imgUrl = imgUrl.replace(/\\/g,"/") 
			//Get the quill cursor and insert the image this.$refs.myQuillEditor.quill.insertEmbed(selection != null ? selection.index : 0, 'image', imgUrl)   
			//After the insertion is completed, the cursor moves back one position this.$refs.myQuillEditor.quill.setSelection(selection.index + 1);
 } 
 })
}