javaweb项目中使用markdown编辑器插件Editor

Editor官网下载插件，地址：

https://pandao.github.io/editor.md

将下载的文件解压，得到完整包
将examples文件夹中静态资源资源文件（css,js,image）导入项目
另外在外层文件中将依赖的plugins、lib、fonts文件夹一并导入，在images文件夹中找到loading.gif，以及editormd.min.js文件一并整合进去。最后的整体目录结构如下：
接下来进入代码阶段，首先html文件：

引入css:

<!-- Editor css... -->
<link rel="stylesheet" href="Editor/css/style.css" />
<link rel="stylesheet" href="Editor/css/editormd.css" />

引入js:

<script src="js/jquery-1.8.3.min.js"></script>
<script src="Editor/js/editormd.min.js"></script>

Editor初始化：

<script type="text/javascript">
	var testEditor;
	$(function() {
		testEditor = editormd("test-editormd", {
			width   : "98%",
			height  : 300,
			syncScrolling : "single",
			path    : "Editor/lib/", //依赖lib文件夹路径    
			emoji : true,
			taskList : true,
            tocm     : true,
			imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "imageUpload"		//上传图片控制器Mapping
		});        
	});
</script>

在body中需要的位置放入Editor

<!-- Editor容器... -->
<div id="test-editormd">
	<textarea id="content" name="content" style="display:none;"></textarea>
</div>

至此，就可以在网页看到markdown编辑器了，中即为markdown文本。
javaweb项目中使用markdown编辑器插件Editor

接下来解决图片上传：

	 	@PostMapping("imageUpload")
	 	@ResponseBody
	    public FileUpload imageUpload(HttpServletRequest request, @RequestParam(value = "editormd-image-file", required = false) MultipartFile file) {
	        //获取文件名
	        String fileName = file.getOriginalFilename();
	        //文件类型后缀
	        String suffix = fileName.substring(fileName.lastIndexOf(".") + 1);
	        //重命名文件
	        String newFileName = new Date().getTime() + "." + suffix;
	        //设置文件存储路径
            String filePath = request.getServletContext().getRealPath("/")+"upload";
	        File dest = new File(filePath,newFileName);
	        //检测是否存在目录
            if (!dest.getParentFile().exists()) {
                dest.getParentFile().mkdirs();
            }
	        try {
				file.transferTo(dest);
				//返回Editor回调json格式：{success:1|0,message:"成功|失败",url:"url"}
				return new FileUpload(1, "上传成功", uploadPath+newFileName);
			} catch (IOException e) {
				e.printStackTrace();
				return new FileUpload(0, "上传失败");
			}
	    }

markdown回显，转HTML

<!-- Editor css... -->
<link rel="stylesheet" href="Editor/css/editormd.css" />
<link rel="stylesheet" href="Editor/css/editormd.preview.min.css" />
<!-- Editor js -->
<script src="js/jquery-1.8.3.min.js"></script>
 <script src="Editor/js/editormd.min.js"></script>
<script src="Editor/lib/marked.min.js"></script>
<script src="Editor/lib/prettify.min.js"></script>

<!-- Editor 容器 -->
<div class="content editormd-preview-theme" id="content">
     <textarea style="display:none;" >${content}</textarea>      
</div>

<!-- Editor markdown转html -->
<script>
	editormd.markdownToHTML("content",{emoji:true});
</script>

秒客网

javaweb项目中使用markdown编辑器插件Editor

相关文章