<template><div><QuillEditor ref="myQuillEditor" theme="snow" :content="modelValue" :options="data.editorOption" contentType="html" @update:content="setValue" /><!-- 使用自定义图片上传 --><input type="file" hidden accept=".jpg,.png" ref="fileBtn" @change="handleUpload" /></div>
</template>下面为示例代码：
<script setup>
import { QuillEditor, Quill } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { ImageDrop } from 'quill-image-drop-module';
// import * as imageResize from 'quill-image-resize-module';
// import imageResize from 'quill-image-resize-module';Quill.register('modules/ImageDrop', ImageDrop);
// Quill.register('modules/imageResize', imageResize);
// Quill.register('modules/imageResize', imageResize);
import { reactive, onMounted, ref, toRaw, watch } from 'vue'
import { client } from "@sxbettem/bettem-micro-utils";const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const myQuillEditor = ref()
const fileBtn = ref()
const toolbarOptions = [// 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']['bold', 'italic', 'underline', 'strike'],// 引用 代码块-----['blockquote', 'code-block']// ['blockquote', 'code-block'],// 1、2 级标题-----[{ header: 1 }, { header: 2 }][{ header: 1 }, { header: 2 }],// 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }][{ list: 'ordered' }, { list: 'bullet' }],// 上标/下标-----[{ script: 'sub' }, { script: 'super' }]// [{ script: 'sub' }, { script: 'super' }],// 缩进-----[{ indent: '-1' }, { indent: '+1' }][{ indent: '-1' }, { indent: '+1' }],// 文本方向-----[{'direction': 'rtl'}]// [{ direction: 'rtl' }],// 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]// [{ size: ['small', false, 'large', 'huge'] }],// 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]// [{ header: [1, 2, 3, 4, 5, 6, false] }],// 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }][{ color: [] }, { background: [] }],// 字体种类-----[{ font: [] }]// [{ font: [] }],// 对齐方式-----[{ align: [] }][{ align: [] }],// 清除文本格式-----['clean']['clean'],// 链接、图片、视频-----['link', 'image', 'video'][ 'image' ],// ['table'] // 表格
]
const data = reactive({content: '',editorOption: {modules: {toolbar: {container: toolbarOptions,handlers: {'image': function (value) {if (value) {fileBtn.value.click()} else {this.quill.format('image', false);}}}},ImageDrop: true,},placeholder: '请输入内容...'}
})
const setValue = (val) => {emit('update:modelValue', val)
}
const handleUpload = (e) => {const files = Array.prototype.slice.call(e.target.files)if (!files) {return}const formdata = new FormData()formdata.append('file', files[0])//url为自定义的上传地址client.upload('url...', {type: "szxcApp"}, files[0]).then(res => {if (res.url) {const quill = toRaw(myQuillEditor.value).getQuill()const length = quill.getSelection().index// 插入图片，res为服务器返回的图片链接地址quill.insertEmbed(length, 'image', res.url)// 调整光标到最后quill.setSelection(length + 1)}})
}
</script>
