Vue集成MarkDown

1.编辑部分

1.下载资源包

npm install mavon-editor --save

2.main.js配置

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

3.组件引入对应的Vue文件

<mavon-editor ref="md" v-model="form.content" :toolbars="toolbars"@imgAdd="imgAdd" @imgDel="imgDel"/>

4.再data中定义工具栏

toolbars:{bold:true,//粗体italic:true,//斜体header:true,//标题underline:true,//下划线strikethrough:true,//中划线mark:true,//标记quote:true,//引用ol:true, //有序列表ul:true, //无序列表link:true,//链接imagelink:true,//图片链接code:true,// codetable:true,//表格fullscreen:true,//全屏编辑readmodel:true,//沉浸式阅读htmlcode:true, //展示html源码help:true,//帮助undo:true,//上一步redo:true,//下一步trash:true,//清空save:false,//保存（触发events中的save事件）navigation:true,//导航目录subfield:true, //单双栏模式preview:true//预览
}

tips：markdown关于上传与删除图片

imgAdd(pos, file) {var formdata = new FormData();formdata.append('file', file); //前端封装图片数据 ‘file’向后端传递的 namethis.$http({ //调用 java 后端上传图片到服务器端url: this.serverAddress+'uploadImg', //自定义后端服务器地址,后端同文件上传功能data: formdata,method: "post",headers: {'Content-Type': 'multipart/form-data','adminToken': this.adminToken},}).then((resp) => { //resp 后端响应数据//将服务器返回的图片地址插入到编辑器内this.$refs.md.$img2Url(pos, resp.data.data);})},imgDel(pos) {var imgUrl = pos[0]; //获取到图片服务器地址alert(imgUrl);this.$http.get("adminApi/newsCtl/deleteImg", {params: {imgUrl: JSON.stringify(imgUrl)}}).then(function(res) {//删除回调if (res.code == 200) {this.$message({message: res.message,type: 'success'});}})}

2.前台展示配置

显示使用markdown格式

1.下载组件

npm install --save showdown

2.配置 main.js

//markdown 格式转为html组件
import showdown from 'showdown'
Vue.prototype.converter = new showdown.Converter();

3.显示模块

<mavon-editor v-html="newsDetail.content" ref="md"
style="white-space: pre-wrap !important;
word-wrap: break-word !important;
padding: 10px;"/>

4.对后端传来的数据进行修改格式

this.$http.get("indexApi/indexCtl/newsDetail?id="+this.id).then((resp) => {if (resp.data.code == 200) {this.newsDetail = resp.data.data;this.newsDetail.content = this.converter.makeHtml(resp.data.data.content);}})