Closed SmallBai22 closed 3 months ago
打开编辑页面时,后台报错,找不到, 因为在内网没有网络,所以添加了自行扩展工具栏:yarn add screenfull katex cropperjs mermaid highlight.js prettier main.ts
config({ codeMirrorExtensions(_theme, extensions) { const _exs = [...extensions, lineNumbers(), foldGutter()]; return _exs; }, editorExtensions: { prettier: { prettierInstance: prettier, parserMarkdownInstance: parserMarkdown }, highlight: { instance: highlight }, screenfull: { instance: screenfull }, katex: { instance: katex }, cropper: { instance: Cropper }, mermaid: { instance: mermaid } } }); // ---
myMdeditor.vue
<template> <el-button type="success" @click="toMessage" > 保存文档 </el-button> <div> <MdEditor v-model="md" :noPrettier="true" :previewTheme="vuepress" @onUploadImg="onUploadImg" :toolbars="state.toolbars" > <template #defToolbars> <Mark /> <Emoji /> <ExportPDF :modelValue="text" height="700px" /> </template> </MdEditor> </div> </template> <script lang="ts"> import {ref, reactive} from 'vue' import { MdEditor } from "md-editor-v3"; import 'md-editor-v3/lib/style.css' import * as api from '../../../api' // 工具栏扩展 import { Emoji, Mark, ExportPDF } from '@vavt/v3-extension'; import '@vavt/v3-extension/lib/asset/style.css'; import { toolbars } from './staticConfig'; export default { name: 'myMdEditor', props: { text: { type: String, default: '' } }, components: {ExportPDF, Mark, Emoji, MdEditor}, emits: ['notify'], // 在这里声明事件 setup (props, ctx) { const md = ref(props.text) // 非必须,但提倡 const toMessage = () => { // 触发自定义事件 'notify' ctx.emit('notify', md.value) } // 上传图片 多 const onUploadImg = async (files, callback) => { const uploadPromises = files.map((file) => { const form = new FormData(); form.append("file", file); // 直接返回axios的promise,不需要再包装一层Promise return api.upload_img(form); }); try { const results = await Promise.all(uploadPromises); console.log('VITE_PRO_URL=', process.env.VITE_PRO_URL) // 假设每个结果都是一个包含url的对象,你可能需要调整这个映射逻辑以匹配你的后端响应 callback(results.map(item => (typeof item.data === 'object' && item.data.url) ? item.data.url : null)); } catch (error) { console.error('Error uploading images:', error); // 在这里处理错误,或者将错误传递给callback callback(null, error); // 假设callback接受两个参数,第一个是结果数组,第二个是错误(如果有) } }; // 扩展 const state = reactive({ modalVisible: false, modalFullscreen: false, toolbars, inputBoxWitdh: '50%' }) return { md, toMessage, onUploadImg, state, } } } </script>
后台报错:https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.6.1/mermaid.esm.min.mjs
编辑器组件什么版本
低版本的md-editor-v3,需要更新才能解决这个问题,在<=4.16.9版本都存在这个问题
打开编辑页面时,后台报错,找不到, 因为在内网没有网络,所以添加了自行扩展工具栏:yarn add screenfull katex cropperjs mermaid highlight.js prettier main.ts
myMdeditor.vue