参考官方文档:https://vueup.github.io/vue-quill/
1、先安装插件
npm install @vueup/vue-quill@latest --save
npm install quill-image-uploader --save
2、局部引入
import { Quill, QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css'// 使用snow主题
import ImageUploader from 'quill-image-uploader';
Quill.register('modules/imageUploader', ImageUploader);
3、全部代码
<template>
<QuillEditor
ref="myQuillEditor"
class="quill-editor"
:style="{ height: height + 'px' }"
contentType="html"
v-model:content="innerContent"
:options="options"
@update:content="handleUpdate"
>
</QuillEditor>
</template>
<script setup>
/**
* 官方文档: https://vueup.github.io/vue-quill/
*/
import { Quill, QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css'; //snow主题使用次样式
// import '@vueup/vue-quill/dist/vue-quill.bubble.css'; //bubble主题使用次样式
import ImageUploader from 'quill-image-uploader';
import { computed, getCurrentInstance, reactive } from 'vue';
import { customerUpload, DownloadBaseUrl } from '@/utils';
Quill.register('modules/imageUploader', ImageUploader);
const props = defineProps({
height: {
type: Number,
default: 200
},
content: {
type: String,
default: ''
},
toolbar: {
type: Array,
default() {
return [
['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' }],
[{ size: ['small', false, 'large', 'huge'] }], // text direction // custom dropdown
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }], // dropdown with defaults from theme
[{ font: [] }],
[{ align: [] }],
['link', 'video', 'image'],
['clean'] // remove formatting button
];
}
}
});
const emit = defineEmits(['update:content']);
const innerContent = computed({
get() {
return props.content;
},
set(value) {
emit('update:content', value);
}
});
const { proxy } = getCurrentInstance();
const options = reactive({
modules: {
toolbar: props.toolbar,
imageUploader: {
upload: (file) => {
return new Promise((resolve, reject) => {
customerUpload(file)
.then((res) => {
console.log('res:', res);
resolve(`${DownloadBaseUrl}pk=${res.data[0].pk}`);
})
.catch((err) => {
proxy.$message.error(err);
reject(err);
});
});
}
}
},
placeholder: '请输入内容',
readOnly: false,
theme: 'snow'
});
const handleUpdate = (content) => {
console.log(content, innerContent.value);
};
</script>
<style></style>