java解析md⽂件,mavon-editor存储md⽂件以及md⽂件解析成
html⽂件
1、md⽂件的存储javascript
由于是vue-cli项⽬，因此使⽤的是mavonEditor.css
使⽤⽅法：vue
⾸先安装：java
npm install mavon-editor --save
⽽后在相应的组件⾥引⽤：git
//引⼊
import {mavonEditor} from 'mavon-editor'java修改html文件
import 'mavon-editor/dist/css/index.css'
/
/标签使⽤，注意这⾥是mavon-editor
v-model="t"
ref="md"
defaultOpen="edit"
:toolbars="toolbarsValue"
@imgAdd="$imgAdd"
@change="changeMavon"
@save="saveMavon" />
//mavon-editor菜单栏的相关配置github
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, // 预览
},
//相关的⽅法vue-cli
/
/富⽂本保存的⽅法
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替换到⽂本原位置![...](0) -> ![...](url)
/**
* $vm 指为mavonEditor实例，能够经过以下两种⽅式获取
* 1. 经过引⼊对象获取: `import {mavonEditor} from ...` 等⽅式引⼊后，`$vm`为`mavonEditor`
* 2. 经过$refs获取: html声明ref : `，`$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格式的⽂本保存到数据库中，⽽后再将其从数据库中取出来解析。数据库
2、md格式的⽂本的解析npm
使⽤marked框架来解析。
⽅法步骤：
npm install marked --save
在组件中引⽤：
import marked from 'marked'
相应的标签：
js⽅法：
//这⾥的newDate[0].content就是取出来的md格式的⽂本内容
sanitize:true
})
存在问题：如今纯粹的只是将其解析成了html⽂件，相应的样式查了下，能够⽤highlight.js，但折腾了很久都没引⽤成功，等以后再仔细看看marked的官⽅⽂档再说....

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。