vue中使用markdown

标签: vue

实现编写博客文章等大段文字

下载插件,引用标签,实现大段文字可编辑,可添加样式,可预览效果
1、 在WriteArticle.vue页面上使用<mavon-editor>标签,并绑定数据articleData.content
2、 在WriteArticle.vue页面js中监听articleData,数据发生变化的时候(也就是在页面输入数据时),向后端发起请求,并保存数据到数据库里
3、点击预览的时候,向后端获取数据,并解析渲染到Details页面上

一、mavon-editor的安装和配置

 1. 	npm install mavon-editor -S
 2. //main.js中添加代码
 
		import mavonEditor from 'mavon-editor'
		import 'mavon-editor/dist/css/index.css'

二、页面使用

//WriteArticle.vue中使用<mavon-editor>标签

<mavon-editor  v-model="articleData.content"></mavon-editor>

三、效果
在这里插入图片描述
四、编辑时向后端发起请求,并保存数据

//WriteArticle.vue中监听数据变化
watch:{
        articleData:{
            handler:function(oldValue,newValue) {
                console.log(this.articleData);
                this.$http({
                    method:'post',
                    url:'/api/saveArticle/',
                    baseURL:process.env.API,
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                    data:qs.stringify(this.articleData)
                }).then(res=>{
                    console.log(res)
                }).catch(res=>{
                    console.log("保存失败");
                })
            },
            deep:true
            }
    },

五、加载Details.vue页面上时,向后端发起请求,获取数据并解析渲染到页面上

1、	npm install marked -S
2、 //Details.vue中使用时引入
	import marked from 'marked'
3、//Details.vue中添加需要渲染的位置
	<div v-html="readContent"></div>
4、//Details.vue中添加方法,页面加载时从后端获取数据,用marked()来解析后端返回的数据
 created() {
      this.getArticleDetail()
  },
  methods: {
      getArticleDetail() {
          this.$http({
              method:'get',
              url:'/api/getArticleDetail/',
              baseURL:process.env.API,
              headers:{'Content-Type': 'application/x-www-form-urlencoded'}
          }).then(res=>{
              console.log("Details页面")
              console.log(res)
              this.readContent = marked(res.data.content)
          }).catch(res=>{
              console.log("获取数据失败")
          })
      }
  },

二、效果
在这里插入图片描述

因为没有连接数据库,数据是后端返回的假数据,所以插入的图片无法查看。

原文链接:加载失败,请重新获取