Vue ContentEditable

content_editable.js

export default {
    name: 'content_editable',
    template: '<div ref="element" v-html="text"></div>',
    props: {
        text: [String],
        customTag: [String],
    },
    mounted: function() {
        let newElement = document.createElement(this.customTag || 'div')

        this.$refs.element.parentNode.replaceChild(newElement, this.$refs.element)
        this.$refs.element = newElement
        this.$refs.element.contentEditable = true
        this.$refs.element.innerHTML = this.text

        this.$refs.element.addEventListener('DOMSubtreeModified', () => {
            this.$emit('edit', this.$refs.element.innerText)
        })

        this.$refs.element.addEventListener('blur', () => {
            this.$emit('blur')
        })

        this.$refs.element.addEventListener('focus', () => {
            this.$emit('focus')
        })
    },
    beforeDestroy: function() {
        this.$refs.element.parentNode.removeChild(this.$refs.element)
    },
    watch: {
        text: function() {
            if (this.text !== this.$refs.element.innerHTML) {
                this.$refs.element.innerHTML = this.text
            }
        }
    }
}

usage:

import content_editable from 'content_editable.js'

{
    template: '<content_editable :text="my_text" v-on:edit="apply" customTag="pre" v-on:blur="save" v-on:focus="focus" />',
    components: {
        content_editable
    }
}