项目目录:
Quill-Editor/index.vue代码如下:
<script setup>
import { reactive, ref, toRaw, watch } from 'vue'
import { SubModelPic,subArticlePic } from '@/api/ModelSub'
import { QuillEditor, Quill } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import '@/styles/quill/font.css';
import '@/styles/quill/style.css'
import 'quill-image-uploader/dist/quill.imageUploader.min.css';
// import 'quill-syntax-highlight/dist/quill.syntax.min.css' // 代码高亮样式
import Compressor from 'compressorjs';
import hljs from 'highlight.js';
import 'highlight.js/styles/vs2015.css'; // 选择你喜欢的样式
import ImageUploader from 'quill-image-uploader';
import BlotFormatter from 'quill-blot-formatter';
// import SyntaxHighlight from 'quill-syntax-highlight' // 代码高亮插件
const props = defineProps({
modelValue: ''
})
const emit = defineEmits({
'update:modelValue': null
})
// 定义ref用于存储编辑器内容
const content = ref('')
// 定义ref用于存储Quill编辑器实例
const quillRef = ref(null)
//registe the Quill models
Quill.register("modules/imageUploader", ImageUploader)
Quill.register("modules/blotFormatter", BlotFormatter)
// Quill.register("modules/syntaxHighlight", SyntaxHighlight)
//Define the Quill configs
const myOptions = reactive({
modules: {
toolbar:[
[{'font': []}],
[{'size': ['small', false, 'large', 'huge']}],
[{ 'align': [] }],
['bold', 'italic', 'underline'],
[{ header: 1 }, { header: 2 }],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
['image'],
['code-block'],
[{ color: [] }],
['clean']
],
imageUploader: {
upload :async (file) => {
const compressedFile = await compressImage(file)
return new Promise((resolve, reject) => {
const formData = new FormData();
formData.append('file',compressedFile);
subArticlePic(formData).then(res => {
resolve(res.data.data);
}).catch(err => {
reject('Upload failed')
console.error('Error',err)
});
});
}
},
blotFormatter: {},
syntax: {
highlight: text => hljs.highlightAuto(text).value
},
},
placeholder: 'Please enter your content'
})
//Function to compress images before upload
const compressImage = file => {
return new Promise((resolve, reject) => {
new Compressor(file, {
quality: 0.8,
maxWidth: 300,
maxHeight: 300,
success: result => resolve(result),
error: err => reject(err)
});
});
};
//Comband the content with the parent
const setValue = () => {
const text = toRaw(quillRef.value).getHTML();
emit('update:modelValue', text);
}
watch(() => props.modelValue, val => {
if(val) {
content.value = val;
} else {
toRaw(quillRef.value).setContents('');
}
})
</script>
<template>
<QuillEditor ref="quillRef" v-model:content="content" :options="myOptions" contentType="html" @update:content="setValue()"/>
</template>
<style lang="scss" >
.ql-editor .ql-syntax {
width: 90% !important;
}
.ql-container {
min-height: 200px !important;
}
</style>
在article-datails.vue中引入这个组件:
<script setup>
//其他代码
import QuillEditor from '@/components/Quill-Editor/index.vue'
const initializeFormModel = () => {
const savedData = localStorage.getItem('formModel')
if(savedData) {
return JSON.parse(savedData)
}
return {
tips: ''
}
}
const formModel = ref(initializeFormModel());
</script>
<template>
//其他代码
//使用组件
<div class="editor" style="margin-top: 3em; width: 100%;">
<QuillEditor :modelValue="formModel.tips" v-model="formModel.tips" ></QuillEditor>
</div>
</template>
错误:
本地在vscode运行没有任何错误,vue-quill能正常显示
但是打包并放入nginx运行,就会报错:
TypeError: Super expression must either be null or a function, not undefined
u http://localhost:8084/assets/ModelSubmit-dee7b168.js:55
r http://localhost:8084/assets/ModelSubmit-dee7b168.js:55
Yo http://localhost:8084/assets/ModelSubmit-dee7b168.js:55
An http://localhost:8084/assets/ModelSubmit-dee7b168.js:55
nl http://localhost:8084/assets/ModelSubmit-dee7b168.js:55
It http://localhost:8084/assets/ModelSubmit-dee7b168.js:55
rn http://localhost:8084/assets/ModelSubmit-dee7b168.js:55
<anonymous> http://localhost:8084/assets/ModelSubmit-dee7b168.js:55
index-cd02402b.js:9:21141
re http://localhost:8084/assets/index-cd02402b.js:9
M http://localhost:8084/assets/index-cd02402b.js:9