一、md文件的存储
因为是vue-cli项目，所以使用的是mavonEditor.
github地址：https://github.com/hinesboy/mavonEditor
使用方法：
首先安装：
npm install mavon-editor --save
然后在相应的组件里引用：
//引入
import {mavonEditor} from ‘mavon-editor‘import ?‘mavon-editor/dist/css/index.css‘
//标签使用，注意这里是mavon-editor
<mavon-editor style="height: 100%;width: 100%;" ????????????????????????????v-model="form.content" ??????????????????????????ref="md" ???????????????????????????defaultOpen="edit" ??????????????????????????:toolbars="toolbarsValue" ??????????????????????????@imgAdd="$imgAdd" ???????????????????????????@change="changeMavon" ????????????????????????????@save="saveMavon" />
//mavon-editor菜单栏的相关配置
toolbarsValue: { ???????????????bold: true, // 粗体 ???????????????italic: true, // 斜体 ???????????????header: true, // 标题 ???????????????underline: true, // 下划线 ???????????????strikethrough: true, // 中划线 ???????????????mark: true, // 标记 ???????????????superscript: true, // 上角标 ???????????????subscript: true, // 下角标 ???????????????quote: true, // 引用 ???????????????ol: true, // 有序列表 ???????????????ul: true, // 无序列表 ???????????????link: true, // 链接 ???????????????imagelink: true, // 图片链接 ???????????????code: true, // code ???????????????table: true, // 表格 ???????????????fullscreen: true, // 全屏编辑 ???????????????readmodel: true, // 沉浸式阅读 ???????????????htmlcode: true, // 展示html源码 ???????????????help: true, // 帮助 ???????????????/* 1.3.5 */ ???????????????undo: true, // 上一步 ???????????????redo: true, // 下一步 ???????????????trash: true, // 清空 ???????????????save: false, // 保存（触发events中的save事件） ???????????????/* 1.4.2 */ ???????????????navigation: true, // 导航目录 ???????????????/* 2.1.8 */ ???????????????alignleft: true, // 左对齐 ???????????????aligncenter: true, // 居中 ???????????????alignright: true, // 右对齐 ???????????????/* 2.2.1 */ ???????????????subfield: true, // 单双栏模式 ???????????????preview: true, // 预览 ???????????},//相关的方法
//富文本保存的方法 ???????saveMavon(value,render){ ?????????????????????console.log("this is render"+render); ?????????console.log("this is value"+value); ???????}, ???????// 绑定@imgAdd event ???????$imgAdd(pos, $file){ ???????????console.log("触发图片上传"); ???????????console.log(pos); ???????????console.log($file); ???????????// 第一步.将图片上传到服务器. ??????????var formdata = new FormData(); ??????????formdata.append(‘file‘, $file); ??????????console.log(formdata); ??????????imgeApi(formdata).then(res=>{ ??????????????// 第二步.将返回的url替换到文本原位置 ->  ??????????????/** ??????????????* $vm 指为mavonEditor实例，可以通过如下两种方式获取 ??????????????* 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor` ??????????????* 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md` ??????????????*/ ???????????????console.log(res.data); ???????????????let url="/server/"+res.data.data; ???????????????this.$refs.md.$img2Url(pos, url);
?????????????//相应的md格式的文件内容就是它绑定的变量 //得到相应的html/文件
console.log(this.$refs.md.d_render);
??????????}); ???????},
我选择的是直接将md格式的文本保存到数据库中，然后再将其从数据库中取出来解析。
二、md格式的文本的解析
使用marked框架来解析。
方法步骤：
npm install marked --save
在组件中引用：
import marked from ‘marked‘
相应的标签：
<div v-html="readmeContent" ></div>
js方法：
//这里的newDate[0].content就是取出来的md格式的文本内容 ?this.readmeContent=marked(newData[0].content||‘‘,{ ???????????????????sanitize:true ???????????????})
存在问题：现在纯粹的只是将其解析成了html文件，相应的样式查了下，可以用highlight.js，但折腾了好久都没引用成功，等之后再仔细看看marked的官方文档再说....
地址：https://marked.js.org/#/README.md#README.md
mavon-editor 存储md文件以及md文件解析成html文件
原文地址：https://www.cnblogs.com/LULULI/p/10610136.html