<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" @focus="onEditorFocus($event)" @blur="onEditorBlur($event)" @change="onEditorChange($event)" /> <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', 'underline', 'strike','link', 'image'] }, placeholder: '请输入详情', readOnly: false, theme: 'snow', toolbarOptions: [ ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{ 'header': 1 }, { 'header': 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'] ] }) const textChange = (e:any) => { textarea.value = e console.log(e, '98', textarea.value); } const onEditorFocus =(e:any)=>{ } const onEditorBlur =(e:any)=>{ } const onEditorChange =(e:any)=>{ console.log(e,'e'); } defineExpose({ simpleImage: Empty.PRESENTED_IMAGE_SIMPLE, textarea, options, textChange, onEditorFocus, onEditorBlur, onEditorChange }); </script> <style scoped> .erro { height: 100vh; display: flex; align-items: center; justify-content: center; } </style>