Markdown编辑器editor.md的使用

 

目录(?)[-]

1. 一Markdown和editormd简介
2. 二editormd的使用
1. 1下载
2. 2简单使用
1. 21在自己的页面上引入相关的css和js代码如下
2. 22在自己的页面中加上DIV
3. 23在同页面中再加上如下JS代码
3. 3上传图片
4. 4Markdown文档页面展示
3. 三editormd的更多配置项
4. 四网站源码

 

一、Markdown和editor.md简介：

---

Markdown在技术圈里（估计更多是程序猿吧）越来越流行。简单的语法，统一的格式，使用过程中，手基本上不用从键盘上移到鼠标上去，超级方便。写好了一篇md文档(也就是含Markdown语法格式的普通TXT文件)，可以随意放到别的支持Markdown格式的网站上发布。

editor.md是国内开源的一款在线Markdown编辑器，单纯基于前端JavaScript实现，和后端什么语言无关。这个还可以画流程图，以及数学公式。官网Demo示例使用的是PHP语言，我后端使用的是Java，Springmvc。

如下记录我在个人开源项目17Smart中使用的方法和过程。17Smart源码目前托管在Github上，感兴趣的可以参考了解。

---

二、editor.md的使用：

---

2.1、下载：

我们可以从其官网中找到下载最新版V1.5.0，解压资源包如下图： 

• >1.examples文件中是使用PHP做的所有示例(可以在文档编辑器里打开，并查看源代码)；
• >2.lib中是editor.md所依赖的第三方js资源；
• >3.plugins中是如emoji表情支持、代码格式化等插件；

2.2、简单使用：

将上面的解压的editormd资源文件拷贝（选取需要的）到我们的项目适合目录下面。

2.2.1、在自己的页面上引入相关的css和js，代码如下：

<link rel="stylesheet"href="/smart-api/htdocs/mdeditor/css/editormd.css" />

<script src="/smart-api/htdocs/mdeditor/js/jquery.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/js/editormd.min.js"></script>

2.2.2、在自己的页面中加上DIV：

DIV的id为my-editormd（这个div在form表单中）。DIV中包含二个textarea，其实官方demo中只有一个，第二个是否方便我们POST提交时，后端可以获取到md文档内容，如java中request.getParameter("my-editormd-html-code")。

<div id="my-editormd" >
<textarea id="my-editormd-markdown-doc" name="my-editormd-markdown-doc" style="display:none;"></textarea>
<!-- 注意：name属性的值-->
<textarea id="my-editormd-html-code" name="my-editormd-html-code" style="display:none;"></textarea>
</div>

这里值得注意两点：

• >1.后端要想获得第二个textarea中的值，首先需要打开editor.md的saveHTMLToTextarea : true设置（见下面）；
• >2.textarea中name属性值，应该跟着div的IDmy-editormd值来定，即$-html-code（刚开始，后端死活获取不到值，翻看了源码才知道）

2.2.3、在同页面中再加上如下JS代码：

<script type="text/javascript">
  $(function() {
      editormd("my-editormd", {//注意1：这里的就是上面的DIV的id属性值
          width   : "90%",
          height  : 640,
          syncScrolling : "single",
          path    : "/smart-api/htdocs/mdeditor/lib/",//注意2：你的路径
          saveHTMLToTextarea : true//注意3：这个配置，方便post提交表单
      });
  });
</script>

这里值得注意三点：

• >1.注意1：这里的就是上面的DIV的id属性值；
• >2.注意2：你的path路径（原资源文件中lib包在我们项目中所放的位置）；
• >3.注意3：saveHTMLToTextarea 设置true或false关乎后端是否可以获取到值；

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

2.3、上传图片：

上面最简单的editor.md的编辑器，目前还是不可以上传图片的。我们需要略作配置修改，还是很简单的。

我们都知道在编写Markdown文档时，图片语法是![说明](url地址)。可是，往往我们需要上传本地图片。在上面的基础之上，略做如下修改即可（当然后端的代码得自己写）：

<script type="text/javascript">
  $(function() {
      editormd("my-editormd", {//注意1：这里的就是上面的DIV的id属性值
          width   : "90%",
          height  : 640,
          syncScrolling : "single",
          path    : "/smart-api/htdocs/mdeditor/lib/",//注意2：你的路径
          saveHTMLToTextarea : true,//注意3：这个配置，方便post提交表单

         /**上传图片相关配置如下*/
         imageUpload : true,
         imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
         imageUploadURL : "/smart-api/upload/editormdPic/",//注意你后端的上传图片服务地址
      });
  });
</script>

注意：editor.md期望你上传图片的服务返回如下json格式的内容

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

我的后台使用的是springmvc，代码如下: 
（注意：@RequestParam(value = "editormd-image-file", required = true注解）

@RequestMapping("editormdPic")
@ResponseBody
public JSONObject editormdPic (@RequestParam(value = "editormd-image-file", required = true) MultipartFile file, HttpServletRequest request,HttpServletResponse response) throws Exception{

        String trueFileName = file.getOriginalFilename();  

        String suffix = trueFileName.substring(trueFileName.lastIndexOf("."));

        String fileName = System.currentTimeMillis()+"_"+CommonUtils.getRandomNumber(100, 999)+suffix;  

        String path = request.getSession().getServletContext().getRealPath("/assets/msg/upload/");
        System.out.println(path);  

        File targetFile = new File(path, fileName);
        if(!targetFile.exists()){
           targetFile.mkdirs();
        }  

       //保存
        try {
           file.transferTo(targetFile);
        } catch (Exception e) {
           e.printStackTrace();
        }  

        JSONObject res = new JSONObject();
        res.put("url", Constant.WEB_ROOT+"assets/msg/upload/"+fileName);
        res.put("success", 1);
        res.put("message", "upload success!");

        return res;

    }

2.4、Markdown文档页面展示：

上面我们通过post提交，后端获取到MD文档内容后，往往存在数据库中，然后在页面展示时，我们需要把MD语法文档，转换为HTML语法（也可以先转换为标准的HTML存储，但我觉得先转换的话，会占用较多存储空间）。

首先引入必要JS（下面不是所有必要）：

<script src="/smart-api/htdocs/mdeditor/js/jquery.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/lib/marked.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/lib/prettify.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/lib/raphael.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/lib/underscore.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/lib/sequence-diagram.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/lib/flowchart.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/lib/jquery.flowchart.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/js/editormd.min.js"></script>

然后，本页面中，加入如下DIV：

<div id="doc-content">
    <textarea style="display:none;">${message.detail }</textarea>
</div>

最后，再引入如下JS代码：

<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd.markdownToHTML("doc-content", {//注意：这里是上面DIV的id
            htmlDecode: "style,script,iframe",
            emoji: true,
            taskList: true,
            tex: true, // 默认不解析
            flowChart: true, // 默认不解析
            sequenceDiagram: true, // 默认不解析
            codeFold: true,
    });});
 </script>

---

三、editor.md的更多配置项：

---

这配置，可以根据官方提供的Demo和源码找到（editor.md-master/examples目录下面）。如，主题颜色设置；上传图片后的特殊处理等。

    <script type="text/javascript">
            var myEditor;

            $(function() {
                myEditor = editormd("my-editormd", {
                    width   : "90%",
                    height  : 800,
                    syncScrolling : "single",
                    path    : "/smart-api/htdocs/mdeditor/lib/",
                    saveHTMLToTextarea : true,

                    emoji: true,//emoji表情，默认关闭
                    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

                    codeFold: true,

                    imageUpload : true,
                    imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                    imageUploadURL : "/smart-api/upload/editormdPic/",

                    /*上传图片成功后可以做一些自己的处理*/
                    onload: function () {
                        //console.log('onload', this);
                        //this.fullscreen();
                        //this.unwatch();
                        //this.watch().fullscreen();
                        //this.width("100%");
                        //this.height(480);
                        //this.resize("100%", 640);
                    },

                    /**设置主题颜色*/
                    editorTheme: "pastel-on-dark",
                    theme: "gray",
                    previewTheme: "dark"
                });

            });
        </script>

---

四、网站&源码：

---

• 网站：17Smart
• 源码：Github
• eBook：《深入剖析Tomcat》