Vue-quill-editor upload content because the picture is Base64 cause the character is too long to solve the problem

Source: Internet
Author: User
Tags base64

Vue-quill-editor is a lighter-weight rich text box, compared to ueditor, developing more editing, more intuitive, if the big guys in the case of requirements allow, or will be more recommended to use Vue-quill-editor

The use of vue-quill-editor in this way not much to say, we check online, a catch a lot of

However, in the use of vue-quill-editor has a fatal problem, vue-quill-editor default insert image is directly to Base64 and then into the content, if the picture is larger, rich text content will be very large, even if the picture is not big, as long as the picture is more, Longer, the content of rich text is also unusually large,

This will give you some trouble, we may prefer to submit rich text content when the picture is simply submitted as a picture address, then we have to deal with it, then we can come to the rationale

Or the old idea, since we can hope that the image is not directly to the Base64, then we can choose to finish the picture, the image upload server, the server returned to the corresponding image link, the front end of the image link inserted into the rich text of the specified cursor, so that we can achieve the desired effect

First of all, create a new Rich Text component Quilleditor.vue, using the iview upload component to upload selected images (of course, other upload components are OK)

1     <Upload2         ID= "Iviewup"3 ref= "Upload"4 : Show-upload-list= "false"5 : On-success= "Handlesinglesuccess"6 : Format= "[' jpg ', ' jpeg ', ' png ']"7 : Max-size= "2048"8 : Headers= "header"9 : On-format-error= "Handleformaterror"Ten : Before-upload= "Handlebeforeupload ()" One type= "Drag" A : Action= "ServerURL" - style= "display:none;width:0"> -           <Divstyle= "width:0"> the               <Icontype= "Ios-camera"size= " the"></Icon> -           </Div> -       </Upload> -       <!--<Row> - +         <Quill-editor -           V-model= "Detailcontent"  + ref= "Myquilleditor"  A : Options= "Editoroption"  at @blur= "Oneditorblur ($event)"@focus= "Oneditorfocus ($event)" - @change= "Oneditorchange ($event)"> -         </Quill-editor> -       <!--</Row> -

See the above code there will be questions, that upload good pictures to be inserted into the rich text of the specified cursor inside it, do not panic, bread will have, look down,

1 handlesinglesuccess (res, file) {2       //Res is the data returned by the picture server3       //Get Rich Text component Instances4Let VM = This5Let Quill = This. $refs. Myquilleditor.quill6Console.log (' Res---', VMs. $refs. MyQuillEditor.quill.getSelection ())7       //If the upload is successful8       if(Res.res_code = = = ' 1 ')) {9           //Get cursor LocationTenLet length =quill.getselection (). Index; One           //Insert Picture Res.info The image address returned by the server Aquill.insertembed (length, ' image ', Res.result.url) -           //adjust the cursor to the last -Quill.setselection (length + 1) the}Else { -VM. $Message. Error (' Picture insertion failed ') -       } -       //Loading animation disappears +        This. quillupdateimg =false -}

Through this. $refs. MyQuillEditor.quill.getSelection (). Index gets the position of the cursor and places the picture address in that position

So everything is ready, only owed the East wind, this time you will find that iview this upload component on the page, how can I achieve click on the rich text of the upload image button to call the iview upload component of the method?

At this time we need to use the Rich Text Configuration Properties editoroption, editoroption to upload the image of the click event to configure the corresponding, the details of the following code

    // Rich text box configuration          Placeholder: ',          ' Snow ',  //  or ' bubble'          modules: {              toolbar: {                  Container:toolbaroptions,  //  toolbar                   handlers: {                      function  (value) {

if (value) {                              document.queryselector (' #iviewUp input '). Click ()                          Else  {                               Thisfalse);       }}}}}
Document.queryselector (' #iviewUp input ') This is the corresponding DOM node of the Click event, bind it to the rich text of the picture button click on the event
Well, basically done. Or is relatively simple, I hope that you can refer to

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.