vue-quill报错

项目目录:

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值