mavoneditor 显示html,mavon-editor 存储md文件以及md文件解析成html文件

一、md文件的存储

因为是vue-cli项目，所以使用的是mavonEditor.

使用方法：

首先安装：

npm install mavon-editor --save

然后在相应的组件里引用：

//引入

import {mavonEditor} from 'mavon-editor'

import 'mavon-editor/dist/css/index.css'

//标签使用，注意这里是mavon-editor

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 : `，`$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'

相应的标签：

js方法：

//这里的newDate[0].content就是取出来的md格式的文本内容

this.readmeContent=marked(newData[0].content||'',{

sanitize:true

})

存在问题：现在纯粹的只是将其解析成了html文件，相应的样式查了下，可以用highlight.js，但折腾了好久都没引用成功，等之后再仔细看看marked的官方文档再说....