<template>
  <div class="vue-quill-container">
    <QuillEditor
      ref="quillRef"
      v-model:content="quillData"
      :options="quillOptions"
      content-type="html"
      @text-change="quillChange()"
    />
  </div>
</template>
<script>
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ script: 'sub' }, { script: 'super' }],
  [{ indent: '-1' }, { indent: '+1' }],
  [{ direction: 'rtl' }],
  [{ size: ['small', false, 'large', 'huge'] }],
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  [{ color: [] }, { background: [] }],
  [{ font: [] }],
  [{ align: [] }],
  ['clean']
]
import { QuillEditor } from '@vueup/vue-quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  name: 'VueQuill',
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  emits: ['update:content'],
  components: { QuillEditor },
  data() {
    return {
      quillData: this.content,
      quillOptions: {
        theme: 'snow',
        placeholder: '请输入',
        modules: {
          toolbar: {
            container: toolbarOptions
          }
        }
      }
    }
  },
  methods: {
    quillChange() {
      this.$emit('update:content', this.quillData)
    }
  }
}
</script>

<style>
.vue-quill-container {
  width: 100%;
  height: 100%;
  min-height: 100px;
}
</style>
