vite vue3使用 VMdPreview @kangc/v-md-editor编辑器 解析md文件

v-md-editor安装使用教程

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save

main.js部分全局引入组件

import EditorMarkdown from '@/components/EditorMarkdown.vue';
app.component('EditorMarkdown',EditorMarkdown)
页面引入

import VMdPreview from "@kangc/v-md-editor/lib/preview";

import "@kangc/v-md-editor/lib/style/preview.css";

解析md文件到组件中使用v-md-preview展示

<v-md-preview :text="text"></v-md-preview>

toPath点击获取。md所在文件的路径filePath。再调用readFile方法获取路径内容。赋值给test。

function toPath(path: string, title: string) {

  showMr.value = title;

  let filePath = "../mdFile/" + path;

  text.value = readFile(filePath);

}

//文件数据读取

function readFile(filePath) {

  // 创建一个新的xhr对象

  let xhr = null;

  if (window.XMLHttpRequest) {

    xhr = new XMLHttpRequest();

  } else {

    // eslint-disable-next-line

    xhr = new ActiveXObject("Microsoft.XMLHTTP");

  }

  const okStatus = document.location.protocol === "file" ? 0 : 200;

  xhr.open("GET", filePath, false);

  xhr.overrideMimeType("text/html;charset=utf-8");

  xhr.send(null);

  return xhr.status === okStatus ? xhr.responseText : null;

}