editor.md国产markdown编辑器踩过的坑_editormd代码块不能选择

具体的使用过程就不说了，在百度搜索一下基本都差不多，我推荐这篇博客，写的比较全
http://blog.csdn.net/lovejavaydj/article/details/73692917

下面记录一下我踩过的坑

一、获取md的内容和html内容

一开始我并不知道md的内容都在哪，一直获取不到，直到查看初始化后的md内容之后才算可以获取到内容了

有一个class为“editormd-markdown-textarea”的，这个里面存储了md编辑的内容
有一个class为“editormd-html-textarea”的，这个里面存储了html格式的内容
但是，这里面有个问题，这两个值可以传到后台，但是不是我想要的参数啊，我不能为了这个修改我后台的代码，一改就是一堆，不然代码看起来就恶心了。我努力啊，想啊，终于

//markdown格式的内容
$(".editormd-markdown-textarea").attr("name", "content");
//markdown的html格式的博文
$(".editormd-html-textarea").attr("name", "html");
1
2
3
4

这段代码解决了我的困扰
把初始化后的textarea参数改掉，这就解决了

---

后来我又在网上找到了这种解决方法

<!-- 文章内容 -->
<div id="articlemd">
    <textarea class="editormd-markdown-textarea" name="content">${blog.content}</textarea>
<!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
    <textarea class="editormd-html-textarea" name="html"></textarea>
</div>
1
2
3
4
5
6

这个不需要从js修改初始化后的参数，直接就可以定义

二、上传图片问题

在我上传图片的时候在其他博客中都看到了初始化参数

editormd({
        id: 'articlemd', //编辑(格式化)的ID
        width: '100%',
        height: 640,
        path: markDownConsts.editorMdPath, //路径
        saveHTMLToTextarea: true, //开启保存HTML文件
        htmlDecode: "iframe,pre",
        /**上传图片相关配置如下*/
        imageUpload: true,
        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], //图片上传格式
        imageUploadURL: "path/upload",
        onload: function () { //上传成功之后的回调

        }
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

就一个URL，完全不知道上传文件的参数是什么，不知道用什么名称获取，在网上找了一圈，都没有博客说到这个的，大概是觉得太简单了吧！！！//嘲讽、傲娇、鄙视(自己脑补画面)

然后我找到一篇有介绍后台获取上传图片的博客，

 @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();
          }
      }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

以editormd-image-file为格式，我经历上面的痛苦之后感觉这像是md命名的格式，于是也用该参数获取，然后就出问题了，死活获取不到值，报没有这个参数

然后没办法，又看了下初始化后的md

<input type="file" name="imgFile" accept="image/*">
1

里面有个这个，靠竟然是“imgFile”，想死的心都有了，然后用该参数获取，没有毛病后台可以正常获取。。。

---

暂时就这么多坑，以后有发现会接着更新

唉！有些坑你不踩一遍你都不知道有什么问题！！！