vue中使用markdown

最新推荐文章于 2025-11-12 09:51:59 发布

原创最新推荐文章于 2025-11-12 09:51:59 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Vue项目中集成mavon-editor富文本编辑器，实现文章编辑、预览及数据保存至数据库的功能。包括编辑器的安装、配置、使用方法，以及前后端交互实现数据实时保存。

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

下载插件，引用标签，实现大段文字可编辑，可添加样式，可预览效果
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("获取数据失败")
          })
      }
  },

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