How vue can customize image uploads using the rich text editor wangEditor

HTML defines a DIV that holds the editor

<template>
    <div id="editor"></div>
</template>
Copy the code

NPM install wangEditor

NPM install wangEditor --save /* WangEditor requires lowercase */Copy the code

The Vue page imports wangEditor

import Editor from 'wangeditor' 
export default {
    data () {
        return {
            editor: ' '}}}Copy the code

The vue page instantiates wangEditor

methods: { 
    async initEditor () { 
        this.editor = new Editor('#editor'The inside of the parentheses) / * corresponding is in HTML div id * / / * * / this configuration menu bar. The editor. The customConfig. Menu = ['head'/ / title'bold', / / bold'fontSize', / / font size'fontName', / / font'italic'/ / in italics'underline', // underline'strikeThrough'// Delete the line'foreColor'// Text color'backColor'// Background color'link'// Insert the link'list'/ / list'justify'// Alignment'quote'/ / reference'emoticon', / / look'image'// Insert the image'table'/ / form'code'// Insert code'undo', / / cancellation'redo'/ / repeat] this. Editor. CustomConfig. UploadImgMaxLength = 5 / limit a upload up to five pictures * / this. Editor. CustomConfig. UploadImgMaxSize = 3 * 1024 * 1024 /* limit the image size to 3 m the default is 5M / /* customize image uploading (cross-domain and non-cross-domain uploading are supported, Simple operation) * / this. Editor. CustomConfig. CustomUploadImg = async (files, insert) = > {/ * * / files is choose the input file listlet formData = new FormData() 
            formData.append('file', files[0]) 
            letData = await this.upload(formData) /* upload method */ /* insert method */ Insert the picture to the editor * / insert (data. ImgUrl)} this. Editor. CustomConfig. Onchange = (HTML) = > {/ * the contents of the HTML that is change after * /} This.editor.create () /* Create an editor */}}Copy the code

Render rich text editor

mounted () {
   this.initEditor()
}
Copy the code