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);
				}
			})
相关推荐
七夜zippoe1 分钟前
前端开发中的难题及解决方案
前端·问题
四季豆豆豆24 分钟前
博客项目 laravel vue mysql 第四章 分类功能
vue.js·mysql·laravel
晓13131 小时前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
Hockor1 小时前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军1 小时前
React 实现 useMemo
前端·react.js·前端框架
海底火旺1 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到111 小时前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡1 小时前
浏览器是否支持webp图像的判断
前端
Xi-Xu1 小时前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github
摆烂为不摆烂1 小时前
😁深入JS(九): 简单了解Fetch使用
前端