mavon-editor 存储md文件以及md文件解析成html文件

Posted lululi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了mavon-editor 存储md文件以及md文件解析成html文件相关的知识,希望对你有一定的参考价值。

一、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替换到文本原位置![...](0) -> ![...](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文件的主要内容,如果未能解决你的问题,请参考以下文章

MD3200存储中虚拟机数据文件丢失的数据恢复过程

Github 存储库中 readme.md 的自定义 css 文件

使用 WriteRange 和 MD5 上传 Azure 文件存储是 KO

:管理文件系统.md

:管理文件系统.md

.md 文件的快捷方式以及使用