markdown编辑器示例

た入场券 2023-07-20 05:51 80阅读 0赞

<!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”  
示例效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70 1]

附一篇相关文章[https://blog.csdn.net/jabinjava/article/details/88375511][https_blog.csdn.net_jabinjava_article_details_88375511]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70]: /images/20230528/78a1004bf4f3492190ee2bfe55bf71d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70 1]: /images/20230528/2d0e5136fa3c46a5ad88a085c7654461.png
[https_blog.csdn.net_jabinjava_article_details_88375511]: https://blog.csdn.net/jabinjava/article/details/88375511