【JS插件】Editor.md

简述

Editor.md 是一款开源在线 Markdown 编辑器，可以通过在github上下载源码。
地址：https://github.com/pandao/pandao.github.io

目录结构：

Editor.md

前端

导入CSS和JS文件：

<!-- Editormd -->
<link rel="stylesheet" href="/static/admin/assets/plugins/editor.md/css/editormd.css">

<!-- Editormd -->
<script src="/static/admin/assets/js/vendor/jquery-1.11.1.min.js"></script>
<script src="/static/admin/assets/plugins/editor.md/editormd.js"></script>

定义一个div，通过jq代码实现效果

<div id="test-editor">
	<textarea></textarea>
</div>

$(function() {           
	var editor = editormd("test-editor", {
			width: "75%",
            height: 650,
			path : '../static/admin/assets/plugins/editor.md/lib/',   //该路径为项目中存放Editor.md源代码lib包路径
			//theme : "dark",
			//previewTheme : "dark",
			//editorTheme : "pastel-on-dark",
			//markdown : md,
			codeFold : true,
			//syncScrolling : false,
			saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
			searchReplace : true,
			//watch : false,                // 关闭实时预览
			htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启    
			//toolbar  : false,             //关闭工具栏
			//previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
			emoji : true,
			taskList : true,
			tocm            : true,         // Using [TOCM]
			tex : true,                   // 开启科学公式TeX语言支持，默认关闭
			flowChart : true,             // 开启流程图支持，默认关闭
			sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
			//dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
			//dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
			//dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
			//dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
			//dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
			imageUpload : true,
			imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
			imageUploadURL : "/admin/upload",      //后台文件上传方法
			onload : function() {
				console.log('onload', this);
				//this.fullscreen();
				//this.unwatch();
				//this.watch().fullscreen();

				//this.setMarkdown("#PHP");
				//this.width("100%");
				//this.height(480);
				//this.resize("100%", 640);
			}
		});
	});
});

初始效果：

后台

Editor.md 可以上传图片，后台的接收参数为：editormd-image-file，需要封装返回的参数，格式为：

success : 0 | 1, // 0 表示上传失败，1 表示上传成功
message : "提示的信息，上传成功或上传失败及错误信息等
url : “图片地址” // 上传成功时才返回

后台文件上传方法，该方法同时处理了dropZone文件上传插件和Editor.md文件上传：

/**
     * 文件上传
     * @param dropzFile
     * @param editorFile
     * @param request
     * @return
     */
    @RequestMapping(value = "upload",method = RequestMethod.POST)
    @ResponseBody
    public Map<String,Object> DropZone(MultipartFile dropzFile,
                                       @RequestParam(value = "editormd-image-file", required = false) MultipartFile editorFile,
                                       HttpServletRequest request){
        //数据返回对象
        Map<String,Object> result = new HashMap<>();
        //判断是dropZone文件还是editor文件
        MultipartFile myFile = dropzFile == null ? editorFile : dropzFile;
        if(myFile != null){
            //获取文件名
            String fileName = myFile.getOriginalFilename();
            //获取文件后缀名
            String fileSuffix = fileName.substring(fileName.lastIndexOf("."));
            //获取文件上传文件夹路径
            String filePath = request.getSession().getServletContext().getRealPath(Const.UPLOAD_PATH);
            //判断文件夹是否存在,不存在就创建文件夹
            File file = new File(filePath);
            if(! file.exists()){
                file.mkdirs();
            }
            //UUID替换文件名
            String filePrefix = UUID.randomUUID().toString();
            file = new File(filePath,filePrefix+fileSuffix);
            //上传文件
            try {
                myFile.transferTo(file);
            } catch (IOException e) {
                logger.error("博客展示图上传出错！！！");
            }
            //拼装url返回值
            String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/" + Const.UPLOAD_PATH + filePrefix + fileSuffix;
            //根据不同的文件封装返回信息
            if(dropzFile != null){
                result.put("path",url);
            }
            /**
             * success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
             * message : "提示的信息，上传成功或上传失败及错误信息等。",
             * url     : "图片地址"        // 上传成功时才返回
             */
            if(editorFile != null){
                result.put("success",1);
                result.put("message","上传成功");
                result.put("url",url);
            }
        }
        //文件为空
        else{
            //根据不同的文件封装返回信息
            if(dropzFile != null){
                result.put("path","");
            }
            /**
             * success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
             * message : "提示的信息，上传成功或上传失败及错误信息等。",
             * url     : "图片地址"        // 上传成功时才返回
             */
            if(editorFile != null){
                result.put("success",0);
                result.put("message","上传失败");
            }
        }

        return result;
    }