- 1.Editor.md介绍
先看一下效果图,是你想要的结果继续往下看
官网介绍
- 支持“标准”Markdown / CommonMark和Github风格的语法,也可变身为代码编辑器;
- 支持实时预览、图片(跨域)上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能;
- 支持ToC(Table of Contents)、Emoji表情、Task lists、@链接等Markdown扩展语法;
- 支持TeX科学公式(基于KaTeX)、流程图 Flowchart 和 时序图 Sequence Diagram;
- 支持识别和解析HTML标签,并且支持自定义过滤标签解析,具有可靠的安全性和几乎无限的扩展性;
- 支持 AMD / CMD 模块化加载(支持 Require.js & Sea.js),并且支持自定义扩展插件;
- 兼容主流的浏览器(IE8+)和Zepto.js,且支持iPad等平板设备;
- 支持自定义主题样式;
2.下载
官网 http://editor.md.ipandao.com/
github地址 https://github.com/pandao/editor.md.git
- 下载官网的zip,解压
3.开始
创建springboot项目,添加依赖
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>
<!-- https://mvnrepository.com/artifact/commons-codec/commons-codec -->
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
</dependency>
<!-- https://mvnrepository.com/artifact/org.apache.commons/commons-lang3 -->
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
</dependency>
<!-- zip处理包 -->
<dependency>
<groupId>org.apache.ant</groupId>
<artifactId>ant</artifactId>
<version>1.9.9</version>
</dependency>
</dependencies>
项目结构
把解压的文件放在static目录下面的editor里面,
创建一个index页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Asciidoctor 1.5.6.1">
<title>md在线编辑</title>
<link rel="stylesheet" href="/editor/css/editormd.min.css" />
<script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/editor/src/editormd.js"></script>
</head>
<body>
<div class="editormd" id="test-editormd">
<textarea class="editormd-markdown-textarea" name="test-editormd-markdown-doc"></textarea>
<!-- 第二个隐藏文本域,用来构造生成的HTML代码,方便表单POST提交,这里的name可以任意取,后台接受时以这个name键为准 -->
<textarea class="editormd-html-textarea" name="text"></textarea>
</div>
<script type="text/javascript">
$(function() {
var testEditor;
testEditor = editormd("test-editormd", {
placeholder:'本编辑器支持Markdown编辑,左边编写,右边预览', //默认显示的文字,这里就不解释了
width: "90%",
height: 640,
syncScrolling: "single",
path: "/editor/lib/", //就是editor的lib目录
theme: "dark",//工具栏主题
previewTheme: "dark",//预览主题
editorTheme: "pastel-on-dark",//编辑主题
saveHTMLToTextarea: true,
emoji: false,
taskList: true,
tocm: true, // Using [TOCM]
tex: true, // 开启科学公式TeX语言支持,默认关闭
flowChart: true, // 开启流程图支持,默认关闭
sequenceDiagram: true, // 开启时序/序列图支持,默认关闭,
imageUpload: true, //开启图片上传
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/img/imgUpLoad", //上传的路径,就是mvc的controller路径
toolbarIcons : function() { //自定义工具栏,后面有详细介绍
return editormd.toolbarModes['full']; // full, simple, mini
},
});
});
</script>
</body>
</html>
这里需要注意的是jquery的依赖,这里就可以编辑了
但是图片上传还是需要后台配置一下的
@Controller
public class SupplierController {
//页面跳转的controller
@RequestMapping("sys/md/{doc}")
public String editMdDoc(@PathVariable("doc") String doc){
return "md/"+doc;
}
@RequestMapping("sys/read")
public String readMd(){
return "md/show/show";
}
}
@RestController
@RequestMapping("/img")
public class ImgUpController {
//上传图片的配置,用的是commons工具,文件存储路径为项目以外
@PostMapping("/imgUpLoad")
public MdResult imgUpLoad(@RequestParam(value = "editormd-image-file", required = false) MultipartFile file){
String rootPath = "F:/download/md/img/";
String path = rootPath + file.getOriginalFilename();
try {
file.transferTo(new File(path));
} catch (IOException e) {
e.printStackTrace();
}
return new MdResult(1,"上传成功","/image/"+file.getOriginalFilename());
}
//MdResult的返回类型,注意返回的格式success,message,url
public class MdResult {
public Integer success;
public String message;
public String url;
public MdResult(Integer success, String message, String url) {
this.success = success;
this.message = message;
this.url = url;
}
}
返回的url就是/image/VCG211164345140.jpg,相当于img标签的链接,因为我这上传的路径不在项目目录下,
配置一下
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
registry.addResourceHandler("/image/**").addResourceLocations("file:F:/download/md/img/");
}
}
目前编辑页面就已经完成了,里面的路径都是写死的,
展示页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>md文件展示</title>
<link rel="stylesheet" type="text/css" href="/editor/css/editormd.css" />
<script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/editor/src/editormd.js" type="text/javascript" charset="utf-8"></script>
<script src="/editor/lib/marked.min.js"></script>
<script src="/editor/lib/prettify.min.js"></script>
<script src="/editor/lib/raphael.min.js"></script>
<script src="/editor/lib/underscore.min.js"></script>
<script src="/editor/lib/sequence-diagram.min.js"></script>
<script src="/editor/lib/flowchart.min.js"></script>
<script src="/editor/lib/jquery.flowchart.min.js"></script>
</head>
<body>
<div id="wordsView">
<textarea style="display:none;" name="editormd-markdown-doc" id="mdText">
</textarea>
</div>
<script type="text/javascript">
$(function() {
$.get('/sys/show/Centos7.md',function(result){
if(result.errorCode==1){
return ;
}else{
$("#mdText").html(result.data.data);
wordsView = editormd.markdownToHTML("wordsView", {
htmlDecode : "style,script,iframe", // you can filter tags decode
emoji : true,
taskList : true,
tex : true, // 默认不解析
flowChart : true, // 默认不解析
sequenceDiagram : true // 默认不解析
});
}
});
//})
});
</script>
</body>
</html>
里面的js看情况引用,直接全部复制也行
因为这里采用的是读取外部md文件,写一个读取的方法
@RestController
@RequestMapping("/sys")
public class ShowMdController {
//文件根据需要自己选择
@GetMapping("/show/{id}")
public ApiResult showMd(@PathVariable("id")String id){
String json = "";
try {
json = FileUtils.readFileToString(new File("F:/download/md/test.md"));
} catch (IOException e) {
e.printStackTrace();
}
return ResultUtils.buildSucessObject(json);
}
}
访问链接就可以了
4. 补充(2019-10-24)
1.返回前端的实例类
public class ResultUtils{
public static final String SUCESS_MSG = "处理成功";
public static final String FAILED_MSG = "处理失败";
public static final Integer SUCESS_CODE = 0;
public static final Integer FAILED_CODE = 1;
private ResultUtils(){
}
public static ApiResult buildError(Integer errorCode,String msg){
return new ApiResult(errorCode,msg,null);
}
public static ApiResult buildSucessObject(Object data){
return new ApiResult(SUCESS_CODE,SUCESS_MSG,data);
}
public static ApiResult buildSucess(){
return new ApiResult(SUCESS_CODE,SUCESS_MSG,null);
}
public static class ApiResult {
private ApiResult(Integer errorCode, String msg, Object data) {
this.errorCode = errorCode;
this.msg = msg;
this.data = data;
}
/**
* 错误码
*/
private Integer errorCode;
/**
* 消息提示
*/
private String msg;
/**
* 返回的函数,一般使用Object或者Map
*/
private Object data;
public Integer getErrorCode() {
return errorCode;
}
public void setErrorCode(Integer errorCode) {
this.errorCode = errorCode;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
}
}
2.前面的主题给大家分享一下
{
"theme": [ //工具栏主题
"default","dark"
],
"previewTheme": [//预览主题
"default","dark"
],
"editorTheme": [//编辑主题
"ambiance",
"eclipse",
"mdn-like",
"mbo",
"monokai",
"neat",
"pastel-on-dark",
"default",
"3024-day",
"3024-night",
"ambiance",
"ambiance-mobile",
"base16-dark",
"base16-light",
"blackboard",
"cobalt",
"eclipse",
"elegant",
"erlang-dark",
"lesser-dark",
"mbo",
"mdn-like",
"midnight",
"monokai",
"neat",
"neo",
"night",
"paraiso-dark",
"paraiso-light",
"pastel-on-dark",
"rubyblue",
"solarized",
"the-matrix",
"tomorrow-night-eighties",
"twilight",
"vibrant-ink",
"xq-dark",
"xq-light"
]
}
5.结束
简单使用就这样子,里面好多可以很灵活的处理,spring的就写的很简单,有兴趣请留言,
转发请注明出处,此文章为原创谢谢!