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

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