vue 使用markdown插件，提交后台保存数据库后，用户从数据库读取时，前台如何实现渲染？

Question

问题描述

vue 使用markdown插件，提交后台保存数据库后，用户从数据库读取时，前台如何实现渲染？

问题出现的环境背景及自己尝试过哪些方法

本人在vue中使用的是mavon-editor插件

"mavon-editor": "^2.7.4"

我想写文章时将其内容提交到后台数据库，然后读取文章时将数据库的内容进行读取，前端再进行渲染。
尝试过简单的文本框提交博客，效果极其不友好。

希望朋友们能帮忙给出方案。

Answer 1

mavon-editor支持预览功能，但是你要想让你最后渲染出来的内容与预览显示一致，有两个细节需要注意：
1.后台应该保存一份markdown数据和一份html数据，mavon-editor本身内容发生修改的时候触发的事件会弹射这两个值。

<mavon-editor
    ref="editor"
    v-model="postData.body"
    class="editor"
    @change="changeString">
       
changeString (value, html) {
  this.postData.bodyHtml = html
},

2.渲染使用html，并且要将对应样式引入，这里是个坑，因为如果未引入它的样式的话预览与实际效果是不同的。
我在前两天开发个人博客网站的时候用了这个编辑器，我是直接复制了一份样式（样式地址）出来的，并且将渲染的html的父元素添加class：markdown-body：

<div class="about-me markdown-body">
    <div class="content" v-html="aboutMe.body_html">
    </div>
</div>

<style lang="stylus">
@import 'static/css/github-markdown.css'
</style>

虽然有一些markdown到html的转换器，但是转换细节与marvon-editor并不相同，所以首选的方法还是以上这个。
具体用法你可以参照我的项目来试试: https://github.com/Lushenggan...
不过这个编辑器用下来并不是那么好用，并不是那么方便，暂时我还没有更换别的编辑器。

Answer 2

现在也是用的mavon-editor，在写个人的项目，昨天刚刚碰到了这个问题
我的后端服务是直接将markdown.md存在服务端，然后将markdown返回给前端
前端渲染：
第一步，通过marked.js将markdown转换为html -->marked.js
第二步，在页面上渲染，但是你需要定义相关的markdown渲染的css，参考-->markdown.scss（样式和markdown编辑器样式不一样，需要统一，这个我还没处理）

示例页面-->示例页面
示例代码-->示例代码

Answer 3

mavonEditor不是自带markdown-it解析器吗？
https://github.com/hinesboy/m...