vue引入markdown编辑器。实现文章发布。

1. 下载

npm install mavon-editor --save

2. main.js引入

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

3. 页面使用。自带@change事件，两个参数分别为输入值和HTML渲染后的值得格式。通过v-html在页面展示

<mavon-editor v-model="form.content" @change="handle"></mavon-editor>
<article v-html="myhtml"></article>
///
 handle(value, render) {
     this.myhtml = render;
     console.log(value, render);
   },

4.文章发布demo
文章编辑页addRelease.vue

<template>
  <div style="width:90%;margin:0 auto">
    <el-form ref="form" :model="form">
      <el-form-item label="发布对象:">
        <el-select v-model="form.people" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布标题:">
        <el-col :span="6">
          <el-input v-model="form.title"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <mavon-editor v-model="form.content" @change="handle"></mavon-editor>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="submit">发布</el-button>
      </el-form-item>
    </el-form>
    <!-- <article v-html="myhtml"></article> -->
  </div>
</template>

<script>
import { getAddRelease } from "@/request/api";
export default {
  name: "addRelease",
  data() {
    return {
      form: {
        title: "",
        people: "",
        content: ""
      },
      // myhtml: "",
      defaultData: "preview",
      options: [
        {
          value: "0",
          label: "全部"
        },
        {
          value: "1",
          label: "教练"
        },
        {
          value: "2",
          label: "学员"
        }
      ],
      timeValue: ""
    };
  },
  created() {},
  methods: {
    handle(value, render) {
      this.myhtml = render;
      console.log(value, render);
    },
    submit() {
      var day = new Date();
      day.setTime(day.getTime());
      var month = day.getMonth() + 1;
      month > 10 ? (month = month) : (month = "0" + month);
      this.timeValue = day.getFullYear() + "-" + month + "-" + day.getDate();
      getAddRelease({
        title: this.form.title,
        content: this.myhtml,
        people: this.form.people,
        time: this.timeValue
      }).then(res => {
        console.log(res);
        this.$message({
          message: "发布成功",
          type: "success"
        });
        this.form = {
          title: "",
          people: "",
          content: ""
        };
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>

文章展示页release.vue

<template>
  <div style="width:90%;margin:0 auto;height:500px;overflow-y:scroll">
    <el-timeline :reverse="reverse">
      <el-timeline-item
        v-for="(item,index) in releaseData"
        :key="index"
        :timestamp="item.rtime"
        placement="top"
      >
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <h2>{{item.rtitle}}<span style="font-weight:normal;font-size:12px;margin:20px">发布给：{{item.rpeople==='0'?'全部':item.rpeople==='1'?'教练':'学生'}} </span>
              <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                <el-button style="float: right;" type="danger" icon="el-icon-delete" circle @click="deleteItem(item.rid)"></el-button>
              </el-tooltip>
               <el-tooltip class="item" effect="dark" content="查看" placement="top-start">
                <el-button style="float: right; margin: 0 10px" type="primary" icon="el-icon-reading" circle @click="view(item)"></el-button>
              </el-tooltip>
            </h2>
          </div>
          <article v-html="item.rcontent" ></article>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
import {getRelease,getDeleteRelease} from "@/request/api";
export default {
  name: "Release",
  components: {},
  data() {
    return {
      releaseData:null,
      people:'',
      reverse:true
    };
  },
  created() {
    this.getData()
  },
  methods: {
    getData(){
      getRelease().then(res=>{
        this.releaseData=res.result
        if(res.result.rpeople==='0'){
          this.people='全部人'
        }
        if(res.result.rpeople==='1'){
          this.people='教练'
        }
        if(res.result.rpeople==='2'){
          this.people='学生'
        }
      })
    },
    deleteItem(index){
      getDeleteRelease({id:index}).then(res=>{
        this.getData()
      })
    },
    view(item){
      this.$store.commit('setContent',item)
      this.$router.push({path:'/admin/viewRelease'})
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>

查看详情页viewRelease.vue

<template>
  <div style="width:90%;margin:0 auto;height:500px;overflow-y:scroll">
    <el-page-header @back="goBack" content="公告详情"></el-page-header>
    <h1>{{content.rtitle}}</h1>
    <el-divider></el-divider>
    <article v-html="content.rcontent"></article>
  </div>
</template>

<script>
import { getRelease, getDeleteRelease } from "@/request/api";
import { mapState } from "vuex";
export default {
  name: "viewRelease",
  components: {},
  data() {
    return {};
  },
  created() {
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
    }
    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
  },
  computed: {
    ...mapState({
      content: state => state.release.content
    })
  },
  methods: {
    goBack() {
      this.$router.push({ path: "/admin/release" });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>

文章页面跳转到文章详情页使用vuex，在跳转到文章详情页前将当前点击的文章数据存到store中，文章详情页在从store中取出来展示。
store.js

const state = {
  content:null
};
const mutations = {
  setContent(state,param){
    state.content=param
  }
};
const actions = {
};
export default {
    state,
    actions,
    mutations
  }