版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/LoveJavaYDJ/article/details/73692917

一、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 : ,
      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 : ,
      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(, )+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", );
  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 : ,
      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>

---------------------
作者:易德军
来源:CSDN
原文:https://blog.csdn.net/LoveJavaYDJ/article/details/73692917
版权声明:本文为博主原创文章,转载请附上博文链接!

Markdown编辑器的使用的更多相关文章

  1. NiceMark——我的Markdown编辑器

    NiceMark--我的Markdown编辑器 闲来无事,写了一个Markdown编辑器.基于electron,完全采用Web前段技术(Html,css,JavaScript)实现.代码已托管在Git ...

  2. 好用的Markdown编辑器一览 readme.md 编辑查看

    https://github.com/pandao/editor.md https://pandao.github.io/editor.md/examples/index.html Editor.md ...

  3. mac好用的markdown编辑器

    在刚开始接触markdown的时候,就被吸引了.此后一直在找贴心的好用的markdown编辑器.印象笔记和马克飞象配合着用也是挺好的,唯一的缺点就是比较封闭,发个笔记的链接给同学,还得注册才能看,导致 ...

  4. 破解 Windows 下Markdown 编辑器 MarkdownPad 2

    MarkdownPad 是 Windows 平台下一款优秀的 Markdown 编辑器,本文简单介绍 Markdown 以及使用一种方法破解 MarkdownPad 使其升级到专业版.该方法仅限于教育 ...

  5. Markdown编辑器语法指南2

    人的一切痛苦, 本质上都是对自己的无能的愤怒. --王小波 1 Markdown编辑器的基本用法 1.1 代码 如果你只想高亮语句中的某个函数名或关键字,可以使用 `function_name()` ...

  6. 推荐一款Mac上好用的Markdown编辑器

    [TOC] 推荐一款Mac上好用的Markdown编辑器 正文 我算是一位Evernote的重度用户吧.之前也尝试过为知笔记,有道云笔记,微软的onenote,最后还是觉的Evernote.因为我喜欢 ...

  7. React项目(一):markdown编辑器

    在之前的React官网教程中,提到了用Remarkable为插件的markdown评论框.现在就来正儿八经地用另外一个插件marked.js做一个markdown编辑器吧! 准备工作 或许在做之前,应 ...

  8. Markdown编辑器:Typora

    现在网上的Markdown有很多,各有各的特色,同时也有各自的缺点.比如有的传图片比较麻烦,有的导出pdf需要付费,有的数学公式编辑比较麻烦等等...... 而最近接触到Typora,发现这真是一款良 ...

  9. Markdown编辑器入门

    欢迎使用博客园的Markdown编辑器 前言 今天早上起来在Ubuntu下操作,所以不能使用Windows Live Writer.所以就直接使用博客园的后台编辑器,开始以为博客园出错了,怎么编辑都没 ...

  10. markdown编辑器

    经过一番探索终于找到两个可以实时预览的markdown编辑器 一,sublime text 3 + MarkDown Editing + OmniMarkupPreviwer 安装方法网上均有,这里要 ...

随机推荐

  1. jflash合并两个文件

    有时候需要将两个代码块烧写进入单片机的flash,可以使用合并的方法将两个文件合并为一个文件进行烧写,也可以分两次烧写,但要注意不要擦写不相关的存储空间. 打开J-FLASH,新建一个工程,然后fil ...

  2. (转)减少oracle sql回表次数 提高SQL查询性能

    要写出高效的SQL,那么必须必须得清楚SQL执行路径,介绍如何提高SQL性能的文章很多,这里不再赘述,本人来谈谈如何从 减少SQL回表次数 来提高查询性能,因为回表将导致扫描更多的数据块. 我们大家都 ...

  3. JQuery速记

    速记笔记的作用是将一些零碎的点整合在一起,这些点太小并不适合写一篇随笔,将这些点揉合在一起,可能有时候,互相就擦出火花,形成一篇博客. 1,可以用一个变量来表示某一个元素,这样就不用每次都输入$(&q ...

  4. 离线安装eclipse maven插件

    最近用到maven,所以按照官网http://www.eclipse.org/m2e/的教程http://download.eclipse.org/technology/m2e/releases/,在 ...

  5. c#中利用“|”运算组合多项

    前几天看到一段代码 int i = GetCount(para1 | para2); 咋一看有些莫名奇妙,怎么传参的时候带了个或运算,其实这里面是有讲究的,查阅了各方资料,QQ群里赖着大牛问,才搞明白 ...

  6. matlab callback 数据传递

    M文件中内的每个Callback都可以视为一个独立的可执行的接口,因此,任一个Callback触发后所执行的运算值若要在其他Callback中使用,就无法与MATLAB工作空间内的变量继续执行操作,也 ...

  7. SVM 与 LR的异同

    LR & SVM 的区别 相同点 LR和SVM都是分类算法. 如果不考虑核函数,LR和SVM都是线性分类算法,也就是说他们的分类决策面都是线性的. LR和SVM都是监督学习算法. LR和SVM ...

  8. 股票交易(DP+单调队列优化)

    题目描述 最近lxhgww又迷上了投资股票,通过一段时间的观察和学习,他总结出了股票行情的一些规律. 通过一段时间的观察,lxhgww预测到了未来T天内某只股票的走势,第i天的股票买入价为每股APi, ...

  9. 【java基础 13】两种方法判断hashmap中是否形成环形链表

    导读:额,我介绍的这两种方法,有点蠢啊,小打小闹的那种,后来我查了查资料,别人都起了好高大上的名字,不过,本篇博客,我还是用何下下的风格来写.两种方法,一种是丢手绢法,另外一种,是迷路法. 这两种方法 ...

  10. ora-08104 该索引对象 159639 正在被联机建立或重建

    SSH远程连接数据库创建索引,网络中断后,删除索引信息报ora-08104 解决方法: 使用ONLINE_INDEX_CLEAN清除索引痕迹 在sys用户下执行 SQL> conn /as sy ...