1、简介

editor.md是国内开发的开源项目，单纯基于前端JavaScript，可以实现markdown编辑器的所有功能。

主要特性

支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown) 风格的语法，也可变身为代码编辑器；
支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、跳转到行、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；
支持 ToC（Table of Contents）、Emoji表情、Task lists、@链接等 Markdown 扩展语法；
支持 TeX 科学公式（基于 KaTeX）、流程图 Flowchart 和时序图 Sequence Diagram;
支持识别和解析 HTML 标签，并且支持自定义过滤标签及属性解析，具有可靠的安全性和几乎无限的扩展性；
支持 AMD / CMD 模块化加载（支持 Require.js & Sea.js），并且支持自定义扩展插件；
兼容主流的浏览器（IE8+）和 Zepto.js，且支持 iPad 等平板设备；

官网：https://pandao.github.io/editor.md/，下载解压后的目录如下图所示：

说明：

css目录中可选择editormd.min.css放在对应的项目css目录中；
js可选择editormd.min.js放置在对应项目的js目录中，需要注意的是同时需要引入jQuery，这里使用jquery.min.js；
examples文件夹中是一部分核心功能的demo，在使用的过程中用到对应的组件或功能可打开参考；
fonts是需要用到字体，可一并引入项目；
images是一些加载类的图片；
lib是editor.md依赖的第三方js资源，比如流程图的js资源；
plugins主要是编辑器上面的操作功能插件，比如图片上传等，可选择使用的进行加载；

在examples文件夹中有一个简单的示例simple.html，源代码为：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8" /><title>示例</title><link rel="stylesheet" href="../css/editormd.css" /></head><body><div id="layout"><header><h1>Simple example</h1></header><div id="test-editormd"><textarea style="display:none;"></textarea></div></div><script src="js/jquery.min.js"></script><script src="../editormd.js"></script><script type="text/javascript">var testEditor;$(function() {testEditor = editormd("test-editormd", {width   : "90%",  //宽度height  : 640,  //高度syncScrolling : "single",  //path    : "../lib/",autoFocus:false  //页面打开时不自动获取焦点});});</script></body>
</html>

注意

<textarea style="display:none;"></textarea>是默认的显示mark文本的区域，默认的name值是test-editormd-markdown-doc，如果想更换名称为content，只需要修改为：<textarea name='content' style="display:none;"></textarea>即可

2、环境搭建

第一步：创建一个Maven形式的Web项目，然后将editor.md解压后的文件全部拷贝到项目的webapp目录下：

第二步：将editormd/examples下的simple.html的源代码拷贝到index.jsp，然后调整为：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head><meta charset="utf-8" /><title>示例</title><link rel="stylesheet" href="${pageContext.request.contextPath}/editormd/css/editormd.css" />
</head>
<body>
<div id="layout"><header><h1>editor.md示例</h1><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></header><div id="test-editormd"><textarea style="display:none;" class="form-control" id="editormd" name="editormd"></textarea></div>
</div>
<script src="${pageContext.request.contextPath}/editormd/examples/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/editormd/editormd.js"></script>
<script type="text/javascript">var testEditor;$(function() {testEditor = editormd("test-editormd", {width   : "90%",height  : 640,syncScrolling : "single",path    : "${pageContext.request.contextPath}/editormd/lib/",//这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。saveHTMLToTextarea : true});});
</script>
</body>
</html>

代码解释：

path：需要指定到项目中对应的lib的路径，如果设置不对markdown 无法渲染出来。
saveHTMLToTextarea设置为true表示，转化为html格式的内容也同样提交到后台。
通过form表单提交时后台可通过request.getParameter(“editormd”)获取到对应的markdown文档内容。

注意：

无论需要html格式的内容还是markdown格式的内容，都只需要写一个textarea。此处有一个很大的坑。不少其他教程中说需要两个textarea，那么会导致后一个textarea后台获得的数据是一个数组，而不是单纯的HTML内容。
运行

这样就完成了一个最简单的editor.md的编辑器了，可以在打开的页面书写熟悉的Markdown文档，里面可以包含代码，右侧有实时的预览。

3、实现文件上传

3.1、理该基础

后端返回的报文必须json 格式：

{success : 0 | 1, //0表示上传失败;1表示上传成功message : "提示的信息",url     : "图片地址" //上传成功时才返回
}

说明：

0,1 必须是数字；
url :就是你图片存在的地址，这个就是返回到弹框中的图片地址。

3.2、示例：

第一步：页面代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html><head><meta charset="utf-8" /><title>示例</title><link rel="stylesheet" href="${pageContext.request.contextPath}/editormd/css/editormd.css" /></head><body><div id="layout"><header><h1>editor.md示例</h1><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></header><div id="test-editormd"><textarea style="display:none;" class="form-control" id="editormd" name="editormd"></textarea></div></div><script src="${pageContext.request.contextPath}/editormd/examples/js/jquery.min.js"></script><script src="${pageContext.request.contextPath}/editormd/editormd.js"></script><script type="text/javascript">var testEditor;$(function() {//Editor初始化：testEditor = editormd("test-editormd", {width   : "90%",height  : 640,syncScrolling : "single",// theme : "dark",path    : "${pageContext.request.contextPath}/editormd/lib/", //依赖lib文件夹路径//这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单saveHTMLToTextarea : true,saveHTMLToTextarea : true, // 保存 HTML 到 Textarea，true表示转化为html格式的内容也同样提交到后台toolbarAutoFixed:true,//工具栏自动固定定位的开启与禁用imageUpload : true,imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],imageUploadURL : "${pageContext.request.contextPath}/imageUpload",});});</script></body>
</html>

说明：

imageUpload：设置为true表示支持上传，此时需要plugins中的image-dialog.js插件（默认调用，放在指定路径即可）
imageFormats：为支持上传的图片类型
imageUploadURL：要上传图片的后台服务器路径

第二步：后台处理文件上传的Servlet

@MultipartConfig    //标识Servlet支持文件上传
@WebServlet(urlPatterns = "/imageUpload")
public class ImageUploadServlet extends HttpServlet {@Overridepublic void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {JSONObject res = new JSONObject();request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");String savePath = request.getServletContext().getRealPath("/uploadFile");  //存储路径File path = new File(savePath);if (!path.exists()) { //如果路径不存在则创建path.mkdirs();}Collection<Part> parts = request.getParts(); //获取上传的文件集合if (parts != null && parts.size() == 1) {   //上传单个文件Part part = request.getPart("editormd-image-file"); //-----① 通过表单file控件(<input type="file" name="file">)的名字直接获取Part对象String header = part.getHeader("content-disposition");//获取请求头String fileName = getFileName(header);String url = savePath + File.separator + fileName;part.write(url);           //把文件写到指定路径res.put("success", 1);res.put("message", "上传成功");res.put("url", "http://localhost:8080/EditorMarkDownDemo_war/imageShow?imageFileName=" + fileName);} else {res.put("success", 0);res.put("message", "上传失败");}PrintWriter out = response.getWriter();out.println(res.toJSONString());out.flush();out.close();}/*** 根据请求头解析出文件名* @param header 请求头* @return 文件名*/public String getFileName(String header) {String[] temp = header.split(";")[2].split("=");//获取文件名，兼容各种浏览器的写法String fileName = temp[1].substring(temp[1].lastIndexOf("\\") + 1).replaceAll("\"", "");return fileName;}
}

编号①处之所以通过editormd-image-file获取Part的原因如下图所示：

第三步：后台处理图片回显的Servlet

@WebServlet(urlPatterns = "/imageShow")
public class ImageShowServlet extends HttpServlet {@Overridepublic void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String imageFileName = request.getParameter("imageFileName");response.setContentType("text/html; charset=UTF-8");response.setContentType("image/jpeg");OutputStream os = response.getOutputStream();String savePath = request.getServletContext().getRealPath("/uploadFile");  //存储路径try (FileImageInputStream input = new FileImageInputStream(new File(savePath + File.separator +imageFileName));ByteArrayOutputStream output = new ByteArrayOutputStream();) {byte[] buf = new byte[1024];int len = -1;while ((len = input.read(buf)) != -1) {output.write(buf, 0, len);}byte[] data = output.toByteArray();os.write(data);os.flush();} catch (FileNotFoundException ex) {ex.printStackTrace();}}
}

结果：

3、页面保存

前端页面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html><head><meta charset="utf-8" /><title>示例</title><link rel="stylesheet" href="${pageContext.request.contextPath}/editormd/css/editormd.css" /></head><body><div id="layout"><header><h1>editor.md示例</h1><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></header><div id="test-editormd"><textarea style="display:none;" class="form-control" id="editormd" name="editormd"></textarea><textarea class="editormd-html-textarea" name="text" id="editormdData"></textarea></div></div><script src="${pageContext.request.contextPath}/editormd/examples/js/jquery.min.js"></script><script src="${pageContext.request.contextPath}/editormd/editormd.js"></script><script type="text/javascript">var testEditor;$(function() {//Editor初始化：testEditor = editormd("test-editormd", {width   : "90%",height  : 640,syncScrolling : "single",// theme : "dark",path    : "${pageContext.request.contextPath}/editormd/lib/", //依赖lib文件夹路径//这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单// saveHTMLToTextarea : true, // 保存 HTML 到 Textarea，true表示转化为html格式的内容也同样提交到后台toolbarAutoFixed:true,//工具栏自动固定定位的开启与禁用imageUpload : true,imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],imageUploadURL : "${pageContext.request.contextPath}/imageUpload",});$("#saveBtn").click(function () {var data = $("#editormdData").val();//alert(html);$.ajax({data:{'data':data},dataType:'text',type:'post',url:'${pageContext.request.contextPath}/saveData',success:function (msg) {alert(msg);}})});});</script><button id="saveBtn">保存代码</button></body>
</html>

后台Servlet：

@WebServlet(urlPatterns = "/saveData")
public class SaveDataServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String data = request.getParameter("data");System.out.println(data);String savePath = request.getServletContext().getRealPath("/md");  //存储路径File file = new File(savePath);if(!file.exists()){file.mkdirs();}FileWriter out = new FileWriter(savePath+"/demo.md");out.write(data);out.flush();out.close();response.getWriter().write("success");}
}

运行，单击保存按钮，在指定的目录下会找到保存好的文件

4、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.md的使用相关推荐

Markdown编辑器editor.md的使用
目录(?)[-] 一Markdown和editormd简介二editormd的使用 1下载 2简单使用 21在自己的页面上引入相关的css和js代码如下 22在自己的页面中加上DIV 23在同页面中 ...
Markdown编辑器Editor.md插件的使用
官网: Editor.md - 开源在线 Markdown 编辑器 (pandao.github.io)https://pandao.github.io/editor.md/index.html配置项 ...
127.0.0.1/dokuwiki/install.php,DokuWiki安装+集成markdown编辑器editor.md
安装安装php和nginx yum install -y php70w php70w-gd php70w-xml php70w-fpm nginx 开机自启动 systemctl enable ng ...
markdown在线编辑器 editor.md 二次开发详细教程
markdown在线编辑器 editor.md 二次开发需求经常需要在网络论坛发布文章进行宣传,但每个论坛的编写格式存在差异,给发布带来了很大的障碍. 最近markdown格式的兴起,给广大发布者 ...
基于react 的markdown编辑器
一,背景近几天工作比较轻松吧,打算把之前没有完成的博客后台管理系统的发布博客功能实现,这就需要一个基于react的markdown编辑器. 之前的博客实现是使用vue实现的,后台管理想使用react ...
基于Web的Markdown编辑器HedgeDoc
什么是 HedgeDoc ? HedgeDoc 是一个开源的.基于 web 的.自托管的.协作的markdown编辑器.您可以使用它轻松地在笔记.图形甚至演示文稿上进行实时协作.用户需要做的就是将你的 ...
基于Ace的Markdown编辑器
相信开发中或多或少都会有使用md的时候.那么一个简易的md编辑器显得尤为重要,如果想要在自己的项目中添加一个md编辑器,那么不妨来看看这篇文章我认为的编辑器分成两类,一种是分为左右两边实现即时渲染: ...
使用editor编辑器遇到的小问题：editor.md工具栏置顶
问题原因: 在使用Markdown编辑器editor.md时,由于editor.md的toolbar始终保持在页面顶部,导致我在使用vue整合时,页面排版出现错乱解决方案: 在 editormd.j ...
PHP项目中使用 Markdown编辑器
个人站点 :http://oldchen.iwulai.com/ Markdown在技术圈越来越受欢迎,今天为大家带来一款国内开源的比较好用的Markdown编辑器--editor.md. 在这次项目 ...

基于JavaWeb的MarkDown编辑器editor.md的使用