vue使用markdown编辑器和把md渲染成html

一.使用markdown编辑器

1.安装mavon-editor插件

npm install mavon-editor --save

2.在main.js中引入mavon-editor

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
注：引入index.css是为了解决编辑器的功能显示问题

不引入index.css的异常：

正常引入index.css:

3.在vue中use一下mavon-editor

Vue.use(mavonEditor)

4.在html标签中引入mav-editor标签

<mavon-editor
          v-model="value"
          :ishljs="true"
          ref="md"
        />

5.若是须要在mavon-editor中使用图片

<mavon-editor
          v-model="value"
          :ishljs="true"
          ref="md"
          @imgAdd="$imgAdd" // 加入这个属性
        />

而后去methods中编辑$imgAdd方法

$imgAdd (pos, $file) { 
 
   
	  // 封装数据
      var formData = new FormData()
      formData.append('fileName', $file)
      // 上传图片给后台
      this.axios.post('/article/image', formData)
        .then(res => { 
 
   
          if (res.data.success) { 
 
   
            this.$refs.md.$img2Url(pos, res.url)
            //用来替换文章中的图片方法。将后台返回的图片地址把编辑器中的图片进行替换
          }
        })
    }

$imgAdd方法中的pos参数是指你在文章中的第几张图片，即为position的缩写。
$file是你上传图片的文件对象

二.将markdown的内容转换成html内容

1.安装showdown插件

npm install showdown

2.全局配置showdown

// 配置showdown
Vue.prototype.converter = new showdown.Converter()

3.将md内容转换成html内容

var htmlContent = this.converter.makeHtml(mdContent)

注：使用this.converter.makeHtml方法，将md类型的内容转换成html内容，这个方方法须要传一个参数，就是你要转换成html内容的md字符串，返回值是html内容

本文分享 CSDN - 冬天爱吃冰淇淋。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。