how to insert image in Editor (WYSIWYG)

[donvie]

Editor (WYSIWYG)

[Max]

register the component and use it in your template…

all explained here: QEditor

[donvie]

@max how to upload image?

[Max]

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

[CristalT]

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()
        }
}

[rv]

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

[qyloxe]

@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>')