<template>
  <div class="editor-box">
    <QuillEditor v-model:content="content" content-type="html" :options="editorOption" />
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, watchEffect } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

const props = defineProps({
  // 默认值
  value: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['update:value'])

const content = ref(props.value)
const editorOption = reactive({
  modules: {
    toolbar: [ // 工具栏配置
      [{ 'color': [] }, 'bold', 'italic', 'underline', 'strike'], // 粗体、斜体、下划线、删除线
      [{ 'header': 1 }, { 'header': 2 }], // 标题1和标题2
      [{ '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'] // 清除格式
    ]
  },
  placeholder: '请输入内容...',
  theme: 'snow'
},
)
// 内容有变化，就更新内容，将值返回给父组件
watchEffect(() => {
  emit('update:value', content.value)
})
</script>
