Vue集成MarkDown - 技术栈

1.编辑部分

1.下载资源包

复制代码

npm install mavon-editor --save

2.main.js配置

js 复制代码

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

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

vue 复制代码

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

4.再data中定义工具栏

js 复制代码

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,// code
     table: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关于上传与删除图片

js 复制代码

imgAdd(pos, file) {
				var formdata = new FormData();
				formdata.append('file', file); //前端封装图片数据 'file'向后端传递的 name
				this.$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

js 复制代码

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

3.显示模块

vue 复制代码

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

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

js 复制代码

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