声明：本文转载自https://my.oschina.net/merryyou/blog/1635594，转载目的在于传递更多信息，仅供学习交流之用。如有侵权行为，请联系我，我会及时删除。
Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。
Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。本章将使用SpringBoot整合Editor.md构建Markdown编辑器。
项目地址：Editor.md
解压目录结构： 
将exapmles文件夹中的simple.html放置到项目中，并配置对应的css和js文件
...... <script src="${re.contextPath}/jquery.min.js"></script> <script src="${re.contextPath}/editor/editormd.min.js"></script> <link rel="stylesheet" href="${re.contextPath}/editor/css/style.css"/> <link rel="stylesheet" href="${re.contextPath}/editor/css/editormd.css"/> <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/> ...... <!-- 存放源文件用于编辑 --> <textarea style="display:none;" id="textContent" name="textContent"> </textarea> <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 --> <textarea id="text" class="editormd-html-textarea" name="text"></textarea> </div> var testEditor; $(function () { testEditor = editormd("test-editormd", { width: "90%", height: 640, syncScrolling: "single", path: "${re.contextPath}/editor/lib/", imageUpload: true, imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL: "/file", //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。 saveHTMLToTextarea: true // previewTheme : "dark" }); }); 这样就实现了最简单的editor.md编辑器，效果如下：
由于在初始化编辑器中配置的图片上传地址为imageUploadURL: "/file",，与之对应，我们在/file处理文件上传即可
@RestController @RequestMapping("/file") @Slf4j public class FileController { // @Value("") // String folder = System.getProperty("user.dir")+File.separator+"upload"+File.separator; /** * 在配置文件中配置的文件保存路径 */ @Value("${img.location}") private String folder; @PostMapping public FileInfo upload(HttpServletRequest request, @RequestParam(value = "editormd-image-file", required = false) MultipartFile file) throws Exception { log.info("【FileController】 fileName={},fileOrginNmae={},fileSize={}", file.getName(), file.getOriginalFilename(), file.getSize()); log.info(request.getContextPath()); String fileName = file.getOriginalFilename(); String suffix = fileName.substring(fileName.lastIndexOf(".") + 1); String newFileName = new Date().getTime() + "." + suffix; File localFile = new File(folder, newFileName); file.transferTo(localFile); log.info(localFile.getAbsolutePath()); return new FileInfo(1, "上传成功", request.getRequestURL().substring(0,request.getRequestURL().lastIndexOf("/"))+"/upload/"+newFileName); } @GetMapping("/{id}") public void downLoad(@PathVariable String id, HttpServletRequest request, HttpServletResponse response) { try (InputStream inputStream = new FileInputStream(new File(folder, id + ".txt")); OutputStream outputStream = response.getOutputStream();) { response.setContentType("application/x-download"); response.setHeader("Content-Disposition", "attachment;filename=test.txt"); IOUtils.copy(inputStream, outputStream); outputStream.flush(); } catch (Exception e) { } } } 表单POST提交时，editor.md将我们的markdown语法文档翻译成了HTML语言，并将html字符串提交给了我们的后台，后台将这些HTML字符串持久化到数据库中。具体在页面显示做法如下：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"/> <title>Editor.md examples</title> <link rel="stylesheet" href="${re.contextPath}/editor/css/editormd.preview.min.css" /> <link rel="stylesheet" href="${re.contextPath}/editor/css/editormd.css"/> </head> <body> <!-- 因为我们使用了dark主题，所以在容器div上加上dark的主题类，实现我们自定义的代码样式 --> <div class="content editormd-preview-theme" id="content">${editor.content!''}</div> <script src="${re.contextPath}/jquery.min.js"></script> <script src="${re.contextPath}/editor/lib/marked.min.js"></script> <script src="${re.contextPath}/editor/lib/prettify.min.js"></script> <script src="${re.contextPath}/editor/editormd.min.js"></script> <script type="text/javascript"> editormd.markdownToHTML("content"); </script> </body> </html> 从我的 github 中下载，https://github.com/longfeizheng/editor-markdown
本文发表于2018年03月16日 22:38
(c)注：本文转载自https://my.oschina.net/merryyou/blog/1635594，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如有侵权行为，请联系我们，我们会及时删除.
阅读 10735 讨论 141 喜欢 2
redis无法获取连接Could not get a resource from the pool分析
编程语言这一年：Rust、Kotlin 上位，Python 横行，PHP……
百篇大计敬本年之C++坎坷之路 —— Warning：will be initialized after [-Wreorder]
避坑！MotionGo就是一款诈骗软件！千万不要用ChatPPT，浪费时间！
宝塔面板使用WWW用户执行计划任务命令 解决laravel日志权限问题 宝塔设置计划任务执行用户
手机微信一键制作透明底文字表情 教你如何让微信表情包背景为透明 自制微信表情包动图 文字表情在线制作
ssh目录权限配置指南 .ssh文件夹及rsa_id.pub等文件正确权限规则
Mac连接亚马逊AWS EC2 远程连接登录不上去 有pem私钥文件依然要输密码 默认密码 教程
PHP工程师必知必会 - Linux系统常用命令 - Linux中的网络管理命令（下）
| 抢先体验 |
|---|
扫码体验 |
| 闪念胶囊 |
|---|
|
你要过得好哇，这样我才能恨你啊，你要是过得不好，我都不知道该恨你还是拥抱你啊。 17:21 2021年04月19日 查看详情 |
|
直抵黄龙府，与诸君痛饮尔。 18:17 2021年03月28日 查看详情 |
|
那时陪伴我的人啊，你们如今在何方。 16:28 2021年03月19日 查看详情 |
|
不出意外的话，我们再也不会见了，祝你前程似锦。 18:05 2021年03月17日 查看详情 |
|
这世界真好，吃野东西也要留出这条命来看看 21:21 2021年03月14日 查看详情 |
| 快捷链接 |
|---|
| 网站地图 |
| 提交友链 |