markdown编辑器示例
程序员文章站
2022-07-14 12:35:30
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>markdown编辑器示例</title>
<link rel="stylesheet" type="text/css" href="css/editormd.min.css"/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="editormd.js"></script>
</head>
<body>
<div class="editormd" id="content" style="border: none">
<textarea class="editormd-markdown-textarea" name="markdown" id="markdown"></textarea>
<textarea class="editormd-html-textarea" name="html" id="html"></textarea>
</div>
<script type="text/javascript">
$(function(){
var markdownEdit;
markdownEdit = editormd('content',{
width:"100%",
height:740,
syncScrolling:'single',
path:'lib/',// editormd/lib/
codeFold:true,
emoji:true,
taskList:true,
tocm:true,
tex:true,
watch:true,
flowChart:true,
sequenceDiagram:true,
imageUpload:true,
saveHTMLToTextarea:true,
htmlDecode:'style,script,iframe|on*',
imageFormats:['jpg','jpeg','gif','png','bmp','webp'],
imageUploadURL:'<%=path%>/admin/upload/editormd',
toolbarIcons:function(){
return ["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","html-entities","preview"];
}
});
});
</script>
</body>
</html>
上传图片控制器
package com.ramostear.unaboot.web.admin;
import com.alibaba.fastjson.JSONObject;
import com.ramostear.unaboot.common.UnaBootConst;
import com.ramostear.unaboot.service.UploadService;
import com.ramostear.unaboot.web.UnaBootController;
import org.apache.commons.lang3.StringUtils;
import org.apache.shiro.authz.annotation.RequiresRoles;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.util.Arrays;
import java.util.List;
import java.util.stream.Collectors;
/**
* @ClassName UnloadController
* @Description 文件上传控制器
* @Author 树下魅狐
* @Date 2020/2/23 0023 8:00
* @Version since UnaBoot-1.0
**/
@RequiresRoles(value = UnaBootConst.ROLE_ADMIN)
@RestController
@RequestMapping("/admin/upload")
public class UnloadController extends UnaBootController {
@Autowired
private UploadService uploadService;
@PostMapping("/editormd")
public JSONObject upload(@RequestParam(name="editormd-image-file")MultipartFile file){
JSONObject json = new JSONObject();
if(file == null || file.isEmpty()){
return convert(json,0,"上传文件不能为空","");
}
if(StringUtils.isBlank(file.getOriginalFilename()) || !allow(file.getOriginalFilename())){
return convert(json,0,"上传文件格式不正确","");
}
String url = uploadService.upload(file);
if(StringUtils.isBlank(url)){
return convert(json,0,"文件上传失败","");
}else{
return convert(json,1,"文件上传成功",url);
}
}
private JSONObject convert(JSONObject json,int status,String message,String url){
json.put("success",status);
json.put("message",message);
json.put("url",url);
return json;
}
private boolean allow(String fileName){
String[] allowFiles = {".gif",".png",".jpg",".jpeg",".bpm"};
String suffix = fileName.substring(fileName.lastIndexOf("."));
List<String> suffixList = Arrays.stream(allowFiles).collect(Collectors.toList());
return suffixList.contains(suffix);
}
}
控制器接收editormd-image-file参数，js中的content对应id=“content”
示例效果
附一篇相关文章https://blog.csdn.net/jabinjava/article/details/88375511
上一篇： Jupyter notebook
下一篇： markdown编辑器