1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<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: '批量输入/粘贴 企业名称或者域名，以“行”为分割线；例如以下：\n北京安全共识科技有限公司\n百度网讯科技有限公司',
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);
}
defineExpose({
simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
textarea,
options,
textChange,
});
</script>
<style scoped>
.erro {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
</style>