<template> <div class="erro"> <a-empty :image="simpleImage" /> <div style="width:600px;height:200px;"> <QuillEditor id="editor" ref="QuillEditorRef" :options="options" :content="textarea" content-type="html" @update:content="textChange" /> </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'], }, placeholder: '批量输入/粘贴 企业名称或者域名,以“行”为分割线;例如以下:\n北京安全共识科技有限公司\n百度网讯科技有限公司', readOnly: false, theme: 'snow', }) // const userSecret = async () => { // if (QuillEditorRef.value) { // QuillEditorRef.value.setText('') // } // }; const textChange = (e:any) => { textarea.value = e console.log(e, '98', textarea.value); } onMounted(() => { new QuillEditor('#editor', { modules: { toolbar: { container: '#toolbar', // Selector for toolbar container handlers: { 'bold': customBoldHandler } } } }); }), defineExpose({ simpleImage: Empty.PRESENTED_IMAGE_SIMPLE, textarea, options, textChange, }); </script> <style scoped> .erro { height: 100vh; display: flex; align-items: center; justify-content: center; } </style>