实现编写博客文章等大段文字
下载插件,引用标签,实现大段文字可编辑,可添加样式,可预览效果
1、 在WriteArticle.vue页面上使用<mavon-editor>标签,并绑定数据articleData.content
2、 在WriteArticle.vue页面js中监听articleData,数据发生变化的时候(也就是在页面输入数据时),向后端发起请求,并保存数据到数据库里
3、点击预览的时候,向后端获取数据,并解析渲染到Details页面上
一、mavon-editor的安装和配置
1. npm install mavon-editor -S
2. //main.js中添加代码
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
二、页面使用
//WriteArticle.vue中使用<mavon-editor>标签
<mavon-editor v-model="articleData.content"></mavon-editor>
三、效果

四、编辑时向后端发起请求,并保存数据
//WriteArticle.vue中监听数据变化
watch:{
articleData:{
handler:function(oldValue,newValue) {
console.log(this.articleData);
this.$http({
method:'post',
url:'/api/saveArticle/',
baseURL:process.env.API,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data:qs.stringify(this.articleData)
}).then(res=>{
console.log(res)
}).catch(res=>{
console.log("保存失败");
})
},
deep:true
}
},
五、加载Details.vue页面上时,向后端发起请求,获取数据并解析渲染到页面上
1、 npm install marked -S
2、 //Details.vue中使用时引入
import marked from 'marked'
3、//Details.vue中添加需要渲染的位置
<div v-html="readContent"></div>
4、//Details.vue中添加方法,页面加载时从后端获取数据,用marked()来解析后端返回的数据
created() {
this.getArticleDetail()
},
methods: {
getArticleDetail() {
this.$http({
method:'get',
url:'/api/getArticleDetail/',
baseURL:process.env.API,
headers:{'Content-Type': 'application/x-www-form-urlencoded'}
}).then(res=>{
console.log("Details页面")
console.log(res)
this.readContent = marked(res.data.content)
}).catch(res=>{
console.log("获取数据失败")
})
}
},
二、效果

因为没有连接数据库,数据是后端返回的假数据,所以插入的图片无法查看。
本文介绍如何在Vue项目中集成mavon-editor富文本编辑器,实现文章编辑、预览及数据保存至数据库的功能。包括编辑器的安装、配置、使用方法,以及前后端交互实现数据实时保存。
1万+

被折叠的 条评论
为什么被折叠?



