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

  1. 下载
npm install mavon-editor --save
  1. main.js引入
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)
  1. 页面使用。自带@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
vue引入markdown编辑器。实现文章发布。_第1张图片

<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
vue引入markdown编辑器。实现文章发布。_第2张图片

<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
vue引入markdown编辑器。实现文章发布。_第3张图片

<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
  }

你可能感兴趣的:(vue)