editormd 上传图片问题解决
2021-05-11 本文已影响0人
_浅墨_
看这个就够了！
http://editor.md.ipandao.com/examples/
一、下载源码
首先在 editormd 官方下载源码:
删除 test、examples、docs 无用文件夹，重命名文件夹如下：
二、移入源码到项目
这里，我把 plugins 文件夹单独拎出来了。根据需要调整文件位置，只要 js css 文件在浏览器链接中可以访问到就行。
在 IDEA 中右键 editormd、plugins 两个文件夹 ，Marked directory as Exclusion，这样两个文件夹下的文件就可以在浏览器访问了。
三、thymeleaf 页面引用
test.html:
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>测试文档</title>
<link rel="shortcut icon" href="favicon.ico">
// 注意，thymeleaf 下，引用需要加 th: @{}
<link rel="stylesheet" th:href="@{/css/style.css}" />
<link rel="stylesheet" th:href="@{/css/editormd.css}" />
<script th:inline="javascript">
var testEditor;
/*提交表单的js*/
function contentCommit(comments){
var docType = "3";
var documentId = "123";
var documentName = "测试文档";
var mdContent = $('#content').val();
var content = {
documentType:docType,
documentId:documentId,
documentName:documentName,
content:mdContent,
mdComment:comments
};
$.ajax({
type:"POST",
url: "./addText",
contentType: "application/json",
data: JSON.stringify(content),
success: function(data){
if ("Y"==data.ifSuccess){
$.modal.alertWarning("保存成功！");
} else {
$.modal.alertWarning("保存失败！");
}
},
error:function (data) {
$.modal.alertWarning("出错啦！请联系管理员！");
return false;
}
});
}
// 编辑保存备注信息
function editComments() {
var options = {
title: '修改备注',
width: "520",
height: "360",
url: ctx + "/editComments",
callBack: doSubmit
};
$.modal.openOptions(options);
}
function doSubmit(index, layero) {
var body = layer.getChildFrame('body', index);
var comments = body.find('#description').val();
contentCommit(comments);
layer.close(index);
}
function selectChangeHistory(){
var docType = "3";
var documentId = "123";
var documentName = "测试文档";
mdEditorForm.method = "post";
// 提交至服务器的路径
mdEditorForm.action = "documentHistoryList"+"?redmineId="+redmineId+"&documentType="+docType+"&documentId="+documentId+"&documentName="+documentName;
mdEditorForm.submit();
}
// 对encodeURI()编码过的 URI 进行解码。
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "I");
var r = window.location.search.substr(1).match(reg);
if(r != null){
return decodeURI(r[2]);
}
return "";//如果此处只写return;则返回的是undefined
};
// 页面加载时，数据初始化
window.onload= function() {
var text = [[${mdText}]];
document.querySelector('.textArea').value =text;
var canEdit = getQueryString('canEdit');
testEditor = editormd("test-editormd", {
width : "90%",
height : 640,
syncScrolling : "single",
path : "../lib/",
readOnly: false,
saveHTMLToTextarea : true,//注意：这个配置，方便post提交表单
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],//支持接收的图片上传的格式
imageUploadURL : "markdown/uploadImageFile", //你的controller里为上传图片所设计的路径
/**下述为新增，上面一行记得加逗号结束*/
/*指定需要显示的功能按钮*/
toolbarIcons : function() {
return ["undo", "redo", "|","bold", "italic","ucwords","uppercase","lowercase","|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol","table","image","datetime","hr", "||", "watch", "fullscreen", "preview", "releaseIcon", "selectHistoryIcon","help"]
},
/*自定义功能按钮*/
toolbarIconTexts : {
releaseIcon : "<span bgcolor=\"gray\">发布</span>",
selectHistoryIcon : "<span bgcolor=\"red\">修改历史</span>",
},
/*给自定义按钮指定回调函数*/
toolbarHandlers:{
releaseIcon : function(cm, icon, cursor, selection) {
// contentCommit();//提交表单代码在下面
editComments();
},
selectHistoryIcon : function(cm, icon, cursor, selection) {
selectChangeHistory();// 查询文档修改历史
},
},
onload:function(){
if ("true" != canEdit || null== canEdit){// 禁止编辑 markdown
$('#test-editormd [name="preview"]').click();
$('#test-editormd .editormd-preview-close-btn').hide()
}else {
$('#test-editormd [name="preview"]').click();
}
}
});
// 对escape()编码的字符串进行解码
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "I");
var r = window.location.search.substr(1).match(reg);
if(r != null){
return unescape(r[2]);
}
return null;//如果此处只写return;则返回的是undefined
};
}
</script>
</head>
<body>
<div id="layout">
<header>
<h1>更新验证规范</h1>
</header>
<form name="mdEditorForm" target="_blank">
<div id="test-editormd">
<textarea name="content" id="content" style="display:none;" class="textArea"> </textarea>
</div>
</form>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
// 注意，thymeleaf 下，引用需要加 th: @{}
<script th:src="@{/editormd/editormd.min.js}"></script>
<script th:src="@{/editormd/lib/marked.min.js}"></script>
<script th:src="@{/editormd/lib/prettify.min.js}"></script>
<script th:src="@{/editormd/lib/raphael.min.js}"></script>
<script th:src="@{/editormd/lib/underscore.min.js}"></script>
<script th:src="@{/editormd/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/editormd/lib/flowchart.min.js}"></script>
<script th:block th:include="include :: footer" />
</body>
</html>
四、controller 后端接口
@Controller
public class MdImageUploadController {
@Autowired
private ServerConfig serverConfig;
@RequestMapping(value = "/markdown/uploadImageFile", method = RequestMethod.POST)
@ResponseBody
public String uploadFile(HttpServletRequest request, HttpServletResponse response,
@RequestParam(value = "editormd-image-file", required = false) MultipartFile attach){
JSONObject jsonObject=new JSONObject();
if (!attach.isEmpty())
{
try {
String imgUrl = MdFileUploadUtils.upload(Global.getMarkdownImagesPath(), attach);
String url = serverConfig.getUrl() + imgUrl;
jsonObject.put("success", 1);
jsonObject.put("message", "上传成功");
jsonObject.put("url", url);
} catch (Exception e) {
jsonObject.put("success", 0);
}
}
jsonObject.put("success", 0);
jsonObject.put("message", "上传图片异常，请联系管理员");
return jsonObject.toString();
}
}
图片上传成功后，返回 json 字符串，前端 js 不需要回调处理，但是 json 字符串一定要按照如下格式。
Editor.md 期待的返回:
{
'success(1表示成功,0表示失败)': 1(或0),
'message': 'message',
'url(如果失败则不返回)': 'imageURL'
}
五、上传图片成功后回调
调试中，遇到问题，图片上传成功后，没能在输入框展示图片链接，修改了 js 文件后，问题解决。
上传成功后：
六、md 编辑页面工具类按钮
可以根据自己需要，自定义功能按钮：
/**下述为新增，上面一行记得加逗号结束*/
/*指定需要显示的功能按钮*/
toolbarIcons : function() {
return ["undo", "redo", "|","bold", "italic","ucwords","uppercase","lowercase","|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol","table","image","datetime","hr", "||", "watch", "fullscreen", "preview", "releaseIcon", "selectHistoryIcon","help"]
// return editormd.toolbarModes['simple']; // full, simple, mini
},
full:["undo","redo","|","bold","del","italic","quote","ucwords","uppercase","lowercase","|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol","hr","|","link","reference-link","image","code","preformatted-text","code-block","table","datetime","emoji","html-entities","pagebreak","|","goto-line","watch","preview","fullscreen","clear","search","|","help","info"],
simple:["undo","redo","|","bold","del","italic","quote","uppercase","lowercase","|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol","hr","|","watch","preview","fullscreen","|","help","info"],
mini:["undo","redo","|","watch","preview","|","help","info"]
参考：
