vue + mavon-editor

推荐一个markdown编辑器：mavon-editor

1. Install mavon-editor (安装)

npm install mavon-editor --save

2. 全局引入（main.js）

import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
 
Vue.use(mavonEditor)

3. 在组件中引入

<template>
  <div id="app">
    <mavon-editor v-model="content"/>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  data() {
    return {
      content: ''
    }
  }
}
</script>
 
<style lang="less">
 
</style>

markdown 语法的字符串在前端显示

1. 安装 showdown 模块

npm install showdown --save

2. 引入

import showdown from 'showdown'

3. 使用

let converter = new showdown.Converter()// 初始化转换器
let html = converter.makeHtml(text)// 将 markdown 语法的字符串转换为 html