<template>
  <div class="erro">
    <a-empty :image="simpleImage" />
    <div style="width:600px;height:200px;">
      <QuillEditor
        ref="QuillEditorRef"
        :options="options"
        :content="textarea"
        content-type="html"
        @update:content="textChange"
      />
      <div id="editor"></div>
    </div>
    
  </div>
</template>

<script lang="ts" setup>
import { defineExpose,ref} from "vue";
import { Empty } from "ant-design-vue";
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
const textarea = ref<any>()
const options  =ref<any>({
  debug: 'info',
  modules: {
    toolbar: [['bold', 'italic'], ['link', 'image']]
  },
  placeholder: '批量输入/粘贴 企业名称或者域名，以“行”为分割线；例如以下：\n北京安全共识科技有限公司\n百度网讯科技有限公司',
  readOnly: false,
  theme: 'snow',
  toolbarOptions: [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }],               // custom button values
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
  [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
  [{ 'direction': 'rtl' }],                         // text direction

  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

  [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
  [{ 'font': [] }],
  [{ 'align': [] }],

  ['clean']                                         // remove formatting button
];
})

const textChange = (e:any) => {
  textarea.value = e
  console.log(e, '98', textarea.value);
}
defineExpose({
  simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
  textarea,
  options,
  textChange,
});
</script>
<style scoped>
.erro {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
