editor.md国产markdown编辑器踩过的坑

具体的使用过程就不说了,在百度搜索一下基本都差不多,我推荐这篇博客,写的比较全
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");

这段代码解决了我的困扰
把初始化后的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>

这个不需要从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 () { //上传成功之后的回调

        }
    });

就一个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();
          }
      }
  }

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

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

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

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


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

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

  • 3
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
要用Java开发一个Markdown编辑器,可以使用JavaFX图形化界面库来实现。而要集成Editor.md,可以在JavaFX中嵌入WebView组件,然后加载Editor.md的HTML页面即可。 以下是实现步骤: 1. 在JavaFX中创建一个WebView组件 ``` WebView webView = new WebView(); ``` 2. 通过WebView组件加载Editor.md的HTML页面 ``` String htmlContent = "<html><head><link rel=\"stylesheet\" href=\"https://pandao.github.io/editor.md/css/editormd.min.css\"/></head><body><textarea id=\"editor\"></textarea><script src=\"https://pandao.github.io/editor.md/lib/marked.min.js\"></script><script src=\"https://pandao.github.io/editor.md/lib/prettify.min.js\"></script><script src=\"https://pandao.github.io/editor.md/lib/raphael.min.js\"></script><script src=\"https://pandao.github.io/editor.md/lib/underscore.min.js\"></script><script src=\"https://pandao.github.io/editor.md/lib/sequence-diagram.min.js\"></script><script src=\"https://pandao.github.io/editor.md/lib/flowchart.min.js\"></script><script src=\"https://pandao.github.io/editor.md/lib/jquery.min.js\"></script><script src=\"https://pandao.github.io/editor.md/editormd.min.js\"></script><script type=\"text/javascript\">var testEditor = editormd(\"editor\", {});</script></body></html>"; webView.getEngine().loadContent(htmlContent); ``` 3. 将WebView组件添加到JavaFX的场景中 ``` Scene scene = new Scene(webView); stage.setScene(scene); stage.show(); ``` 这样就可以实现一个简单的Markdown编辑器,并集成了Editor.md的功能。当然,还需要实现一些逻辑来获取编辑器中的内容并进行解析和保存等操作。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值