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;
}