jszt 的个人博客

之前用solo搭了博客，对后台的markdown的编辑器挺感兴趣的，在solo的开源社区中看到了solo的同款编辑器vditor

然后最近也是在写一个博客的系统，就用上了vditor
好了废话不多说，直接开始

环境安装

我的后台管理页面是用vue-admin-template脚手架搭的， 直接用

npm install vditor --save

就安装了

在要使用的页面导入

import  Vditor  from  'vditor'  
<style  lang="scss"  scoped>  
@import  '~vditor/src/assets/scss/classic';  
</style>

js代码(文件上传)

const  vditor  =  new  Vditor("content", {  
 cache:false,//缓存  
 // placeholder:"请输入内容",  
 height:500,//高度  
 preview:{  
 	show:  true  
 },  
 upload:{  
 	url:"http://localhost:8080/file",//文件上传路径  
 	success:function(textarea,msg){//textarea  
 		//将返回的信息传为json对象  
		msg  =  JSON.parse(msg)  
		if(msg.code  ===  20000){//请求成功  
			this.open(msg.message,"success")//消息提示  
 			let  content;  
 			for(var  key  in  msg.data){  
 				//获取文件后缀，判断类型  
 				let  temp  =  key.substring(key.lastIndexOf('.'))  
				if(temp  =="png"||  temp  =="jpg"){  
 					content  =  "!["+  key  +"]("+msg.data[key]+")"  
 				}else{  
			 		content  =  "["+  key  +"]("+msg.data[key]+")"  
				}
 		}  
	 	//插入上传文件后的markdown代码  
	 	vditor.insertValue(content)  
	 	}else{//请求失败  
			thit.open(msg.message,"error")  
	 	}  
 	}  
 },  
 resize:{  
 	enable:true  
 }  
})

Java Controller层(文件上传)

 @PostMapping  
 public Result addFile(){  
	Map<String,Object> data = new HashMap<>();  
 	data.put("url","https://segmentfault.com/img/bVEo3w?w=1200&h=2800");  
 	return new Result(true,StatusCode.OK,"请求成功",data);  
 }

后台效果

前台页面的展示

这里展示我用是的 thymeleaf来做的 也是导入依赖

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor/dist/index.classic.css" />  
<script src="https://cdn.jsdelivr.net/npm/vditor/dist/index.min.js"></script>  
<!-- 代码高亮样式 -->  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.15.6/styles/atom-one-light.min.css" />

html代码

<h1>[[${article.title}]]</h1>  
 <div>  
 	[[${#dates.format(article.createTime,'yyyy-MM-dd')}]] | [[${article.comments}]] | [[${article.visits}]]  
 </div>  
 <div class="text vditor-reset" th:utext="${article.content}">  
 </div>  

注意： 要在展示内容的div上添加 class="vditor-reset"，这样它就能渲染成markdwon样式了

页面效果

到这里页面展示就完成了

Vditor 官方文档

Vditor使用指南 https://hacpai.com/article/1549638745630?r=Vanessa