how to insert image in Editor (WYSIWYG)



  • Editor (WYSIWYG)



  • register the component and use it in your template‚Ķ

    all explained here: QEditor



  • @max how to upload image?



  • check: qeditor-definitions . allows to specify a handler for upload as an example



  • You have to set definitions property:

    <!-- HTML -->
    <q-editor v-model="post.body" :definitions="definitions"/>
    
    
    // script
    
    data() {
        return {
            definitions: {
                    insert_img: {
                        tip: 'Insertar Imagen',
                        icon: 'photo',
                        handler: this.insertImg // handler will call insertImg() method
                    }
                }
            }
        },
        methods: {
            insertImg() { // insertImg method
                const post = this.post
                // create an input file element to open file dialog
                const input = document.createElement('input')
                input.type = 'file'
                input.accept = '.png, .jpg' // file extensions allowed
                let file
                input.onchange = _ => {
                    const files = Array.from(input.files)
                    file = files[0]
      
                   // lets load the file as dataUrl
                    const reader = new FileReader()
                    let dataUrl = ''
                    reader.onloadend = function() {
                        dataUrl = reader.result
                       
                        // append result to the body of your post
                        post.body += '<div><img src="' + dataUrl + '" /></div>' 
                    }
                    reader.readAsDataURL(file)
                }
                input.click()
            }
    }
    


  • Would it be possible to paste image in q-editor using Ctrl+V or drag-and-drop?



  • @cristalt said in how to insert image in Editor (WYSIWYG):

    post.body += '<div><img src="' + dataUrl + '" /></div>' 
    

    You can replace above with this. It puts the image in cursor position:

    document.execCommand('insertHTML', true, '<div><img src="' + dataUrl + '" /></div>')
    

Log in to reply