imzbf / md-editor-extension

Common extensions for md-editor-v3 and md-editor-rt.
MIT License
28 stars 13 forks source link

mermaid 已经自行添加拓展,但是在内网还是报错,麻烦帮忙看看, #33

Closed SmallBai22 closed 3 months ago

SmallBai22 commented 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>
SmallBai22 commented 3 months ago

后台报错:https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.6.1/mermaid.esm.min.mjs

imzbf commented 3 months ago

编辑器组件什么版本

imzbf commented 3 months ago

低版本的md-editor-v3,需要更新才能解决这个问题,在<=4.16.9版本都存在这个问题