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

邢走在云端
  • 281

问题描述

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

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

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

"mavon-editor": "^2.7.4"

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

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

回复
阅读 4.5k
3 个回答

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...
不过这个编辑器用下来并不是那么好用,并不是那么方便,暂时我还没有更换别的编辑器。

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏