Quill Editor with Vue.js by using vue-quill-editor

editor.vue

<template>
<quill-editor :content="value"
              @change="onChange"
              ref="myQuillEditor"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @ready="onEditorReady($event)">
</quill-editor>
</template>

<script>
import hljs from 'highlight.js'

import { TOOLBAR_OPTIONS } from '@/editor/options'

import { quillEditor } from 'vue-quill-editor'

export default {
  name: 'Editor',
  props: ["value"],
  components: {
    quillEditor
  },
  data () {
    return {
      content: '',
      editorOption: {
        placeholder: "コンテンツの本文を書いてください...",
        modules: {
          toolbar: TOOLBAR_OPTIONS,
          syntax: {
            highlight: text => hljs.highlightAuto(text).value
          }
        }
      }
    }
  },
  methods: {
    onChange ({quill, html, text}) {
      this.$emit("input", html)
    },
    onEditorBlur(quill) {
      console.log('editor blur!', quill)
    },
    onEditorFocus(quill) {
      console.log('editor focus!', quill)
    },
    onEditorReady(quill) {
      console.log('editor ready!', quill)
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  }
}
</script>

<style lang="scss">
@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.snow.css';
@import '~quill/dist/quill.bubble.css';

@import '~highlight.js/styles/darcula.css';


.quill-editor {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
}

.ql-container {
    font-size: 16px;
    flex: 1;
    overflow: scroll;
}

.ql-editor pre.ql-syntax * {
    font-family: monospace;
}

// Style

.ql-snow {
    &.ql-toolbar {
        border: none;
        border-bottom: solid 1px #aaa;
        
        padding-left: 0;
        padding-right: 0;
    }
    
    &.ql-container {
        border: none;
        
        .ql-editor {
            padding-left: 0;
            padding-right: 0;
        }
    }
}
</style>