vuejs-summernote

summernote.vue

<template>
  <div />
</template>
<script>
import $ from 'jquery'
require('summernote/dist/summernote-bs4')
export default {
  name: 'editor',
  props: {
    value: {
      required: true
    },
    rows: {
      type: Number,
      default: 4
    },
    placeholder: {
      default: ''
    },
    focus: {
      type: Boolean,
      default: false
    }
  },
  mounted () {
    let self = this
    let initOptions = {
      placeholder: this.placeholder,
      focus: self.focus,
      height: this.rows * 19,
      callbacks: {
        onInit: function () {
          self.$emit('init')
        },
        onEnter: function () {
          self.$emit('enter')
        },
        onFocus: function () {
          self.$emit('focus')
        },
        onBlur: function () {
          self.$emit('blur')
          self.$emit('input', $(self.$el).summernote('code'))
        },
        onKeyup: function (e) {
          self.$emit('keyup', e)
        },
        onKeydown: function (e) {
          self.$emit('keydown', e)
        },
        onPaste: function (e) {
          self.$emit('paste', e)
        },
        onChange: function (contents) {
          self.$emit('change', contents)
        }
      }
    }
    $(this.$el).summernote(initOptions)
    $(this.$el).summernote('code', this.value)
  },
  beforeDestroy () {
    $(this.$el).summernote('destroy')
  },
  watch: {
    value (v) {
      $(this.$el).summernote('code', v)
    }
  },
  methods: {
    changeHandler (e) {
      console.info(e)
    }
  }
}
</script>