Vue-quill-editor enables Image Upload,

Vue-quill-editor enables Image Upload,

Problem description

The vue2.0 development used by the zookeeper project requires a Rich Text editor. After some psychological struggles, the landlord chooses vue-quill-editor. I will not go into details here on how to reference the author in the project.
When inserting an image in queue vue-quill-editor, convert the image to base64 and then put it into the content. This will cause a problem. If the image is large, the rich text content will be very large, and the landlord will store the content in the database. In this way, on the one hand, it will occupy a large amount of database storage space, and on the other hand, when the picture is too big, rich text content, the Storage Limit of the database is exceeded, leading to incomplete display due to content truncation (even for the text type, the storage limit is 65535 ).
Then the question arises: how can I upload images to my server or a third-party service, and then insert the obtained image url into the text? I think there are roughly two ways: one is to hand over the task to the server, where the server intercepts the base64 image and converts it into a file, replacing its path or url with the original image data; the second is to start with the control, first upload the image, and then insert it into the rich text. Next, the landlord began to step on the road.

Solution

Basic Introduction

1. vue-quill-editor is a quill (github address) Rich Text editor for Vue2, so it also supports native attribute extensions for quill. Quill document address

2. quill has many extension and custom method functions. Compare the definition size of the slice, click processing for Image Upload, and so on.

Upload images

View the quill project issue. It was found that the problem of uploading images was considered and modified. Therefore, it is feasible to upload images. The next step is how to implement it.

3. First, we need to get the quill instance in the project. This article describes how to obtain it in the vue-quill-editor project. The basic method is to obtain your vue-quill-editor instance through ref and then the quill instance. The Code is as follows. Here, newEditor is my vue-quill-editor.

This. $ refs. newEditor. quill

4. After obtaining the instance, we need to consider how to upload images and insert URLs into text. You can register a custom image processing function through searching. This function is triggered when the image button in the top toolbar is clicked. However, in actual use, you will find that this function is not like the image and callback parameters mentioned in the document. image is your image, you only need to pass in the processed url in callback. Instead, it receives a parameter state. When it is clicked, this function is triggered and the state value ---- true is input. Here we will first introduce how to register this handler function-imgHandler. Note that the registration function should be written in the mounted lifecycle hook.

mounted() {var vm =this var imgHandler = async function(state) { if (state) {  //button is clicked } } vm.$refs.newEditor.quill.getModule("toolbar").addHandler("image", imgHandler)}

5. Check stackflow and find that you can only Click Upload and insert in imgHandler. In this way, write an undisplayed input under the editor, listen to the changes, upload the image, and obtain its instance. When imgHandler is clicked, the analog input button is clicked. The code is changed to the following example.

Mounted () {var vm = this var imgHandler = async function (image) {vm. addImgRange = vm. $ refs. newEditor. quill. getSelection () if (image) {var fileInput = document. getElementById (vm. uniqueId) // The hidden file text ID fileInput. click () // Add a trigger event} vm. $ refs. newEditor. quill. getModule ("toolbar "). addHandler ("image", imgHandler )}

6. Click Upload of input and insert of image url.

HTML code

<Div v-loading = "imageLoading" element-loading-text = "Please wait while uploading the image"> <quill-editor ref = "newEditor ": options = "newOption" style = "height: 200px; margin-bottom: 54px "v-model =" editorContent "@ change =" editorChange "> </quill-editor> <form action =" "method =" post "enctype =" multipart/form- data "id =" uploadFormMulti "> <input style =" display: none ": id =" uniqueId "type =" file "name =" avator "multiple accept =" image/jpg, Image/jpeg, image/png, image/gif "@ change =" uploadImg ('uploadformmulti') "> <! -- Style = "display: none" --> </form> </div>

Vue code

UploadImg: async function (id) {var vm = this vm. imageLoading = true var formData = new FormData ($ ('#' + id) [0]) try {const url = await vm. uploadImgReq (formData) // custom image upload function if (url! = Null & url. length> 0) {var value = url vm. addImgRange = vm. $ refs. newEditor. quill. getSelection () value = value. indexOf ('http ')! =-1? Value: 'http: '+ value vm. $ refs. newEditor. quill. insertEmbed (vm. addImgRange! = Null? Vm. addImgRange. index: 0, 'image', value, Quill. sources. USER)} else {vm. $ message. warning ("image addition failed")} document. getElementById (vm. uniqueId ). value = ''} catch ({message: msg}) {document. getElementById (vm. uniqueId ). value = ''vm. $ message. warning (msg)} vm. imageLoading = false },

This is a success. If you have any errors, problems, or better solutions, please let us know ~
Finally, when solving this problem, the ImageResize is integrated into the control. For more information, see the demo in vue-quill-editor.

 import Quill from 'quill' import { ImageResize } from '../modules/ImageResize.js' Quill.register('modules/imageResize', ImageResize)

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.