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'

相应的标签：

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文件

最新文章

热门文章