前言:
几天前,集成了百度的ueditor,感觉不符合现代前端的审美逻辑,并且肥胖,pass了,偶然发现editormd,觉得美滋滋,一路踩坑下来,特此记录
editormd:支持 AMD / CMD 模块化加载(支持 Require.js & Sea.js),并且支持自定义扩展插件;
传送门:
editormd下载地址
这里有个坑,之前下载了-java版本-php版本,集成有问题
开始
1、复制editormd文件夹到项目,static文件夹为静态资源目录,spring已经将static静态化,精简的
目录结构如下:
2、引入css、js、html,注意相对路径
<link rel="stylesheet" href="../../../static/css/editormd.min.css"/>
<script src="../../../static/js/editormd.min.js" type="text/javascript"></script>
<div id="editormd">
<textarea style="display:none;" name="markdownContent"></textarea>
</div>
3、js配置、初始化,注意:
path指向lib文件夹,
// editormd 配置
var editormd_Ins;
editormd_Ins = editormd("editormd", {
width: "100%",
height: 640,
syncScrolling: "single",
path: "../../../static/editormd/lib/",
saveHTMLToTextarea: true, //注意3:这个配置,方便post提交表单
//开启图片上传
imageUpload: true,
imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL: "/imageUpload",//图片接口
});
4、图片上传接口后台java代码
注意1:如果使用idea打包war,这时候get图片会404,因为idea是虚拟了一个tomcat,如果想要正常get,手动startup.bat
注意2:@RequestParam(value = "editormd-image-file", required = true,参数不要动
/**
* editormd上传图片
*
* @param file
* @param request
* @return
*/
@RequestMapping("/imageUpload")
@ResponseBody
public JSONObject imageUpload(@RequestParam(value = "editormd-image-file", required = true) MultipartFile file, HttpServletRequest request) {
//路径
String path = request.getSession().getServletContext().getRealPath("/");
//使用硬盘路径替代path,防止重新部署Tomcat项目图片丢失,此处tomcat已经docbase指向了"D:/"
path = "D:/";
//保存相对路径,解决同源问题
String relativePath = "editorImg/";
//文件名
String trueFileName = file.getOriginalFilename();
//后缀名
String suffix = trueFileName.substring(trueFileName.lastIndexOf("."));
//重新命名
String fileName = System.currentTimeMillis() + "_" + CommonUtil.getRandomNumber(100, 999) + suffix;
//io
File targetFile = new File(path+relativePath, fileName);
if (!targetFile.exists()) {
targetFile.mkdirs();
}
//保存
try {
file.transferTo(targetFile);
} catch (Exception e) {
e.printStackTrace();
}
//返回给前端
JSONObject res = new JSONObject();
res.put("url", "../"+relativePath + fileName);
res.put("success", 1);
res.put("message", "upload success!");
return res;
}
5、常用两个方法
//editormd_Ins 步骤3中editormd实例化对象
//获得markdown格式的文本
editormd_Ins.getMarkdown()
//获得html源码
editormd_Ins.getHTML()
6、数据回显
常规而言分为两种场景:
1、动态创建,即编辑状态
<div id="test-editormd">
<textarea style="display:none;" name="test-editormd-markdown-doc">###Hello world!</textarea>
</div>
//动态创建
testEditormd = editormd("test-editormd", {
width: "90%",
height: 640,
markdown : "### 动态创建 Editor.md\r\n\r\nDynamic create Editor.md",
path : '../lib/'//注意lib的路径指向
});
2、静态创建,即非编辑状态,转HTML输出页面
<div id="test-editormd-view">
<textarea style="display:none;" name="test-editormd-markdown-doc">###Hello world!</textarea>
</div>
//静态创建方法:
testEditormdView = editormd.markdownToHTML("test-editormd-view", {
markdown : markdown ,//+ "\r\n" + $("#append-test").text(),
//htmlDecode : true, // 开启 HTML 标签解析,为了安全性,默认不开启
htmlDecode : "style,script,iframe", // you can filter tags decode
//toc : false,
tocm : true, // Using [TOCM]
//tocContainer : "#custom-toc-container", // 自定义 ToC 容器层
//gfm : false,
//tocDropdown : true,
// markdownSourceCode : true, // 是否保留 Markdown 源码,即是否删除保存源码的 Textarea 标签
emoji : true,
taskList : true,
tex : true, // 默认不解析
flowChart : true, // 默认不解析
sequenceDiagram : true, // 默认不解析
});