markdown编辑器示例-蒲公英云

markdown编辑器示例

た入场券 2023-07-20 05:51 121阅读 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);
    }
}