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