editor.md实现Markdown编辑器

editor.md实现Markdown编辑器

Markdown和Editor.md简介

Markdwon编辑器在技术工作者圈子中已经越来越流行，简单的语法，统一的格式，强大的扩展功能，最重要的是：你可以用Markdown，设计一篇精彩绝伦的文档而完全不需要将你的右手从键盘上移到鼠标上去，这是我和很多编程工作者最热爱的。长期使用Leanote的原因，也是基于有着强大的WEB端和客户端的Markdown编辑器（个人甚至偏向于客户端Leanote）。

Editor.md 是国人开发的开源在线Markdown编辑器，单纯基于前端JavaScript，无需后台代码加持，适用于任何语言（仅在上传图片功能时需要一点后台代码与之配合，其余都交给Editor.md吧），因为是中国人开发的，对中文支持得相当到位。在我的个人博客设计过程中，相当长一段时间都是使用的百度的ueditor作为文档编辑器，说实话，配置那玩意儿相当繁琐，而要想把ueditor配置得符合自己心意更是烦上加烦。在经历了一次SpringMVC与ueditor上传组件冲突的bug后，有种彻底想放弃ueditor的冲动。
长期使用Leanote的Markdown编辑器的我，苦苦寻求一种能取代ueditor的Markdown编辑器，Editor.md 正是我想要的。

Editor.md的安装使用

1.基本使用及表单提交

基本使用markdown是相当简单的，比ueditor还要简单，从git上下载回来的Editor.md是1.5版，压缩包里有分门别类详细的文件夹。

在examples文件夹中有一个简单的示例simple.html，可以在浏览器里打开，并查看源代码，我这里做一个简单的总结，并加上表单提交的配置：

• 在HTML中加载CSS：editormd.css
• 在HTML中加载JS：顺序为jQuery，editormd.min.js，

• 在HTML中写一个div节点,包含两个textarea，格式如下：

  <div class="editormd" id="test-editormd">
  <textarea class="editormd-markdown-textarea" name="test-editormd-markdown-doc"></textarea>
  <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
  <textarea class="editormd-html-textarea" name="text"></textarea>
  </div>

• 在HTML中写一句javascript：

  <script type="text/javascript">
  $(function() {
      editormd("test-editormd", {
          width   : "90%",
          height  : 640,
          syncScrolling : "single",
          //你的lib目录的路径，我这边用JSP做测试的
          path    : "<%=request.getContextPath()%>/resources/editormd/lib/",
          //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。
          saveHTMLToTextarea : true
      });
  });
  </script>

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

  2.图片上传

  有了基本的Markdown功能，集成editor.md就完成了一半了，下面开始处理图片上传。
  图片上传的语法是![alt](url),这个用来嵌入互联网上现成的图片是很方便的，但是如果想要上传本地图片就要后台代码配合了，我下面以JAVA为例（官方文档有PHP的示例），配合SpringMVC和commons-fileupload-1.3.1.jar，简单给个DEMO：
  根据Editor.md的官方文档介绍，上传图片功能需要添加一点配置，如下：

  editormd("test-editormd", {
  width   : "90%",
  height  : 640,
  syncScrolling : "single",
  path    : "<%=request.getContextPath()%>/resources/editormd/lib/",
  imageUpload : true,
  imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
  imageUploadURL : "/uploadfile",
  saveHTMLToTextarea : true,
  });
  //editor.md期望得到一个json格式的上传后的返回值，格式是这样的：
  /*
  {
      success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
      message : "提示的信息，上传成功或上传失败及错误信息等。",
      url     : "图片地址"        // 上传成功时才返回
  }
  */

  以上代码并不难理解，也就加了三行配置，关键的是imageUploadURL : "/uploadfile"这个配置，这里的URL指向了你处理图片上传的action，与之对应的，我的SpringMVC控制器是这样的，这里贴出了整个代码，防止有小伙伴对JAVA以及SpringMVC处理文件上传还不太熟练：

  package com.newflypig.jblog.controller;
  import java.io.File;
  import java.io.IOException;
  import javax.servlet.http.HttpServletRequest;
  import javax.servlet.http.HttpServletResponse;
  import org.apache.commons.io.FileUtils;
  import org.springframework.stereotype.Controller;
  import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.RequestMethod;
  import org.springframework.web.bind.annotation.RequestParam;
  import org.springframework.web.multipart.MultipartFile;
  @Controller
  public class UploadController {
  
  @RequestMapping(value="/uploadfile",method=RequestMethod.POST)
  public void hello(HttpServletRequest request,HttpServletResponse response,@RequestParam(value = "editormd-image-file", required = false) MultipartFile attach){
      try {
          request.setCharacterEncoding( "utf-8" );
          response.setHeader( "Content-Type" , "text/html" );
          String rootPath = request.getSession().getServletContext().getRealPath("/resources/upload/");
  
          /**
           * 文件路径不存在则需要创建文件路径
           */
          File filePath=new File(rootPath);
          if(!filePath.exists()){
              filePath.mkdirs();
          }
  
          //最终文件名
          File realFile=new File(rootPath+File.separator+attach.getOriginalFilename());
          FileUtils.copyInputStreamToFile(attach.getInputStream(), realFile);
  
          //下面response返回的json格式是editor.md所限制的，规范输出就OK
          response.getWriter().write( "{"success": 1, "message":"上传成功","url":"/resources/upload/" + attach.getOriginalFilename() + ""}" );
      } catch (Exception e) {
          try {
              response.getWriter().write( "{"success":0}" );
          } catch (IOException e1) {
              e1.printStackTrace();
          }
      }
  }
  }

  这样就完成了图片上传了，上传后，后台action返回了一个url给editor.md，editor.md使用这个url作为你嵌套在文档中的图片url。
  这样就大功告成了，是不是很爽，要比ueditor的上传配置简单100倍。

  3.Editor.md代码黑色主题

  用惯了sublime text等编辑器，是不是对代码的渲染有点要求呢，先上博主两个IDE的截图吧，一个是sublime text3，一个是myeclipse2015：
  
  
  习惯了黑色背景的代码样式，就希望editor.md也能实现代码黑色样式，果然，editor.md从1.5版本以后为大家提供了dark样式主题，但是会让除代码以外的其他编辑区域也变黑色，所以根据个人需要来小小的改造一下：

• 首先添加样式配置，在原来的editor.md配置基础上，添加配置项：

  $(function() {
  editormd("test-editormd", {
  width   : "90%",
  height  : 640,
  syncScrolling : "single",
  path    : "<%=request.getContextPath()%>/resources/editormd/lib/",
  imageUpload : true,
  imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
  imageUploadURL : "/uploadfile",
  saveHTMLToTextarea : true,
  //下面这一行将使用dark主题
  previewTheme : "dark"
  });
  });

  配置好dark主题以后，编辑区还是原来的编辑区，预览区已经使用了暗黑模式，但是代码以外的部分也都变成黑色背景了，这不是我想要的，所以我对editormd.css做了一些修正，将dark主题代码以外的部分取消了样式定义，这样预览起来只有代码块是暗黑模式，截图如下：
  
  修改了editormd.css后，别忘了使用CSS压缩工具再压缩一遍，生成editormd.min.css，这样正式部署时能减轻一点服务器压力，提高加载效率。我把压缩好重新生成的editormd.min.css放出来，有需要的可以直接下载。
  editormd.min.css

  4. 文档的显示

  编辑区的代码格式已经调整成为我们喜欢的样式了，在表单POST提交时，editormd将我们的markdown语法文档翻译成了HTML语言，并将html字符串提交给了我们的后台，后台应该将这些HTML字符串持久化到数据库中，在文章显示时将他们显示在页面上。
  具体的做法是：

  <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/editormd/css/editormd.preview.min.css" />
  <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/editormd/css/editormd.css" />
  <!-- 因为我们使用了dark主题，所以在容器div上加上dark的主题类，实现我们自定义的代码样式 -->
  <div class="content editormd-preview-theme-dark" id="content">${article.text }</div>
  <script src="<%=request.getContextPath()%>/resources/js/jquery.min.js"></script>
  <script src="<%=request.getContextPath()%>/resources/editormd/lib/marked.min.js"></script>
  <script src="<%=request.getContextPath()%>/resources/editormd/lib/prettify.min.js"></script>
  <script src="<%=request.getContextPath()%>/resources/editormd/editormd.min.js"></script>
  <script type="text/javascript">
  editormd.markdownToHTML("content");
  </script>

  至此，我们所有的工作都完成了。（另外还有些editor.md高级功能，比如[TOC]标签自动生成文档目录结构、流程图语法等，我还没研究，不过现在已经满足我的所有要求了，感兴趣的朋友可以继续阅读examples文件夹中各种示例。）
  如果您各项基础知识掌握得都还可以的话，将editor.md这个编辑器引入你的项目是相当轻松加愉快的。写这篇blog也确实因为对这个编辑器的喜爱，加上官方尚未有一个系统的cookbook，都是一个个小demo，希望能帮到想使用editor.md的朋友。