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

Posted 2021-11-11 lululi

一、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